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

Я делаю вертикальный неупорядоченный список блоков (внутри div), в котором у меня есть граница под каждым ли. Но каким-то образом границы не соответствуют всей ширине div. Я думаю, что ul должен точно вписаться в div, чтобы сделать это, но я не знаю, как это сделать.Граница в неупорядоченном списке не соответствует всей ширине div

Это снимок экрана DIV и уль в нем:

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>

Очередное обновление (CSS код родительского DIV):

.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

Это имеет смысл, но это не работает или. Я обновлю свой вопрос с помощью CSS-кода родительского div, возможно, это поможет. – Loolooii

Обновлен мой ответ с полным кодом. Дайте мне знать, если это сработает. У меня в коде есть некоторые другие проблемы, которые я исправил. – fivedigit

Спасибо, это решило проблему. проблема была stats-list ul {}, которая должна была быть ul.stats-list {} :) – Loolooii

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

Также отметим, что «ul.stats-лист» в вашем HTML не соответствует «.stats-лист» ул

источник

2012-01-14 14:04:24 Flo

padding left не решает проблему в этом случае. И я не понимаю, что вы подразумеваете под этим? Что мне делать, чтобы соответствовать тому, и что я делаю неправильно? Благодарю. – Loolooii

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

ответ

Смежные вопросы