padding总是推动并增加容器的宽度

Question

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

的CSS：

利{宽度：120像素;填充左：10px的;}

我得到的是左侧的10px填充，但是它将文本推到120px边界之外并使其成为130px宽的容器。理想情况下，我希望两侧都有10px填充，这样我就可以获得100px的文本链接。我希望这个文本能够包装并推倒。但那并没有发生。

Answer 1

填充始终添加到W3C框模型中框的宽度。要么不指定宽度，要么将宽度设置为所需宽度 - 填充。另外，正如Sandeep在他的回答中所示，你可能需要专门设置自动换行以打破长连续字符串。

Answer 2

写：

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

填充＆am​​p; border总是为元素添加宽度。