為什么使用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的數據