无序列表中的边框不适合div的整个宽度

我正在制作一个垂直无序块列表（在div内），其中每个li下都有一个边框。但不知何故，边界不适合div的整个宽度。我想ul必须完全适合div才能做到这一点，但我不知道如何。无序列表中的边框不适合div的整个宽度

这是div的屏幕截图和UL它：

list in the div

这是我使用的CSS代码：

.stats-list li{ 
    zoom: 1; 
    border-bottom:1px solid #ececec; 
    border-spacing:30px; 
    display:block; 
    text-align:left; 
    margin-bottom:20px; 
    color:#ffffff; 
    height:40px; 
} 
.stats-list ul{ 
    list-style-type:none; 

}

我从来没有穿过来了这个问题之前。有没有人有任何解决方案？谢谢。

UPDATE（HTML代码）：

<div class="checkin-stats-right"> 
     <ul class="stats-list"> 
      <li>bla blaaa</li> 
      <li>blaaaa</li>  
      <li>blaaaaaa</li> 
     </ul> 

</div>

另一个更新（父DIV的CSS代码）：

.checkin-stats-right{ 
    background-color: #cfcfcf; 
    width: 320px; 
    height: 180px; 
    margin-right: auto; 
    float:left; 
    margin-left:25px; 
    margin-top:25px; 

}

来源

2012-01-14 Loolooii

默认情况下，UL元件通常具有padding-left集到一定量的像素。试试这个：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style> 
      .stats-list li { 
       zoom: 1; 
       border-bottom:1px solid #ececec; 
       border-spacing:30px; 
       display:block; 
       text-align:left; 
       margin-bottom:20px; 
       color:#ffffff; 
       height:40px; 
      } 

      ul.stats-list { 
       list-style-type:none; 
       padding-left: 0; 
      } 

      .checkin-stats-right { 
       background-color: #cfcfcf; 
       width: 320px; 
       height: 180px; 
       margin-right: auto; 
       float:left; 
       margin-left:25px; 
       margin-top:25px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="checkin-stats-right"> 
      <ul class="stats-list"> 
       <li>bla blaaa</li> 
       <li>blaaaa</li>  
       <li>blaaaaaa</li> 
      </ul> 

     </div> 
    </body> 
</html>

来源

2012-01-14 13:59:19 fivedigit

这是有道理的，但是，这并不正常工作无论是。我会用父div的CSS代码更新我的问题，也许有帮助。 – Loolooii 2012-01-14 14:02:15

用完整的代码更新了我的答案。让我知道这个是否奏效。你的代码有一些我修复的其他问题。 – fivedigit 2012-01-14 14:08:30

谢谢，这解决了这个问题。问题是stats-list ul {}必须是ul.stats-list {} :) – Loolooii 2012-01-14 14:18:29

.stats-list ul { 
    padding-left: 0; 
}

另外请注意，在你的HTML“ul.stats列表”不匹配“.stats列表UL”

来源

2012-01-14 14:04:24 Flo

填充左边不能解决问题在这种情况下。我不明白你的意思？我该怎么做才能匹配，我做错了什么？谢谢。 – Loolooii 2012-01-14 14:10:42

无序列表中的边框不适合div的整个宽度

回答

相关问题