为什么使用UL LI 时，UL与Li之间保留边距呢？

本文转载自查看原文 2015-09-13 16:35 2169 HTML

这是因为当我们使用:

list-style: none; /*如果设置 list-style: none;时只会隐藏其排序符号，但实际其提排序符号仍是占空间的，
相当于: visibility:hidden,*/

解决方案：

padding-left:0px;/*如果要得到结果就要设置内边距了 padding-left:0px*/

前端

@{
    ViewBag.Title = "Index";
}

<html>
<head>

    <title></title>

    <link href="~/Content/Text.css" rel="stylesheet" />
</head>
<body>


    <ul class="dromenupdown">

        <li>其他帐号登录：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
    </ul>

   

         <ul class="dromenupdown_0">
        <li>其他帐号登录：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
        <li>腾讯QQ：</li>
       </ul>    
</body>
</html>

CSS

.dromenupdown{
                
    border:1px solid green;
     width: 105px;
}

   

           
.dromenupdown  li {
  list-style: none;/*如果设置 list-style: none;时只会隐藏其排序符号，但实际其提排序符号仍是占空间的，
相当于:  visibility:hidden,*/
   
  float: none;
  width: 102px;
  height: 28px;
  line-height: 28px;
  color: #6599c9;
  font-weight: 400;
  display: block;
  text-align: center;
  border:1px solid red;
}

.dromenupdown_0 {
    border:1px solid green;
     width: 105px;

    padding-left:0px;/*如果要得到结果就要设置内边距了 padding-left:0px*/
}
.dromenupdown_0 li {

 list-style: none; /*如果设置 list-style: none;时只会隐藏其排序符号，但实际其提排序符号仍是占空间的，
相当于:  visibility:hidden,*/  
  float: none;
  width: 102px;
  height: 28px;
  line-height: 28px;
  color: #6599c9;
  font-weight: 400;
  display: block;
  text-align: center;
  border:1px solid red;
 

}

：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Html 列表 li ul使用 css 中ul li 与 ul>li的区别 Ul li 竖排菜单 ul li 的分页 html ul li的学习请把

第1行
第2行

（ul之间有10个li元素）插入body里面，注意：需要考虑到性能问题。使用CSS把ul,li制作成表格 ul li设置横排，并除去li前的圆点设置ul的指定li 样式动态获取ul,li的数据