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 style

.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/

Answer 2

在填充期间不是零，在默认的box-model（内容框）中将width设置为content，因此element的结果宽度为100％+ 20 px。

解决方案是使用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 3

那是因为你已经为你的div设置了填充，所以div现在是600px宽度（100％）+ 20px（左右填充）;

里面的100％div显示的尺寸大于li尺寸

3 个答案: