100% div внутри li показывает размер больше, чем размер li

Question

то, что я делаю неправильно здесь, почему мой div имеет размер больше, чем LI, который я тестировал в хроме, мой текст очень большой, и он выходит из размера LI и когда я проверить элемент обнаружил, что размер DIV не содержится в LI

<ul class="aa"> 
    <li> 
     <div> 
      my text is here loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum 
     </div> 
    </li> 

CSS стиль

.aa li 
    { 
     width:600px; list-style:none; display:block; margin:0px; padding:0px; 
    } 

.aa li div 
    { 
     width:100%; 
     padding:0px 10px 0px 10px; margin:0px; 
    }  

Answer 1

Именно во время заполнения не равна нулю, по умолчанию в окне-модели (содержание коробка) ширина устанавливается к контенту, поэтому ширина результата элемента составляет 100% + 20 пикселей.

Решение должно использовать box-model: border-box. Примечание - для mozilla и т. Е. Есть префикс (-ms- и -moz-). Результат CSS будет

.aa li 
{ 
    width:600px; list-style:none; display:block; margin:0px; padding:0px; 
} 

.aa li div 
{ 
    width:100%; 
    padding:0px 10px 0px 10px; margin:0px; 
    box-model: border-box; 
    -ms-box-model: border-box; 
    -moz-box-model: border-box; 
}  

PS Для IE вы можете взломать это также с помощью режима совместимости

Answer 2

При добавлении отступы к чему-то, что это width:100% вы делаете его более 100%.

Простой способ исправить это, чтобы удалить width из <div> или установить его на auto, если необходимо.

До: http://jsfiddle.net/VkJQu/

После: http://jsfiddle.net/VkJQu/1/

Answer 3

Это Becase вы установили отступы для вашего DIV так ДИВ теперь 600px в ширину (100%) + 20px (левый и правый прокладки);