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

时间:2012-01-14 13:49:40

标签: html css border html-lists

我正在制作一个垂直无序阻止列表(在div内),其中每个li下都有一个边框。但不知何故,边框不适合div的整个宽度。我想ul必须完全适合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;

}

我以前从未遇到过这个问题。有没有人有任何解决方案?感谢。

更新(HTML code):

<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;

}

2 个答案:

答案 0 :(得分:1)

默认情况下,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>

答案 1 :(得分:1)

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

另请注意,HTML中的“ul.stats-list”与“.stats-list ul”不匹配