填充总是推动并增加我的容器的宽度答案

【问题标题】：padding always pushes and increases the width of my container填充总是推动并增加我的容器的宽度
【发布时间】：2011-04-27 04:13:22
【问题描述】：

<ul>
<li><a href="">ddgdfgdfgdfg</a></li>
<li><a href="">ddgdfgdfgdfgsdfdsfdsf</a></li>
<li><a href="">ddgdfg</a></li>
</ul>

css:

li{宽度:120px; padding-left:10px;}

我得到的是左侧 10 像素的填充，但它将文本推到了 120 像素边界之外，并使其成为 130 像素宽的容器。理想情况下，我希望两边都有 10px 的填充，这让我有 100px 的文本链接。我希望该文本能够换行并向下推。但这并没有发生。

【问题讨论】：

标签： css

【解决方案1】：

在 W3C 盒子模型中，填充总是添加到盒子的宽度上。要么不指定宽度，要么将宽度设置为所需宽度 - 填充。此外，正如 Sandeep 在他的回答中所表明的那样，您可能需要专门设置自动换行以打破长连续字符串。

【讨论】：

【解决方案2】：

写：

li{
 width:100px;
 padding:0 10px;
 word-wrap:break-word;
}

填充和边框总是给元素增加宽度。

【讨论】：