Css li内的100%div显示的大小大于li大小

这里我做错了什么？为什么我的div比我在chrome中测试的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>

---

它是在填充期间不为零的，在默认情况下，框模型（内容框）的宽度设置为内容，所以元素的结果宽度为100%+20px

解决方案是使用

框模型：边框框

属性。注意-对于mozilla和ie，有一个前缀（-ms-和-moz-）。结果将是

.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，你也可以通过使用怪癖模式来解决这个问题，当你在

宽度为100%

的东西上添加填充时，你会使其超过

100%

解决此问题的简单方法是从

中删除

宽度，或在必要时将其设置为
自动

之前：

之后：
这是因为您已将填充设置为div，因此div现在为600px宽（100%）+20px宽（左侧和右侧填充）
 是的，这个。作为旁注，可能值得一提的是，元素的总宽度=左边框+左边框+左填充+宽度+右填充+右边框+右边框+右边框。看见
.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;
}