css - li 内的 100% div 显示尺寸大于 li 尺寸

Question

我在这里做错了什么 为什么我的 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>

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

当您向 width:100% 的内容添加填充时你使它超过100% .

解决这个问题的简单方法是删除 width来自 <div> ，或将其设置为 auto如有必要。

之前:http://jsfiddle.net/VkJQu/

之后:http://jsfiddle.net/VkJQu/1/