Граница в неупорядоченном списке не соответствует всей ширине div - PullRequest
Новая
       13

Граница в неупорядоченном списке не соответствует всей ширине div

2 голосов
/ 14 января 2012

Я делаю вертикальный неупорядоченный список блоков (внутри 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>

Еще одно обновление (CSS-код родительского div): 

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

}

Ответы [ 2 ]

1 голос
/ 14 января 2012 
.stats-list ul {
  padding-left: 0;
}

Также обратите внимание, что "ul.stats-list" в вашем HTML не совпадает с ".stats-list ul"

1 голос
/ 14 января 2012

По умолчанию элемент 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>
...