填充总是推动并增加了我的容器

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框模型中框的宽度。要么不指定宽度，要么将宽度设置为desired-width - padding。此外，如Sandeep在他的回答中所示，您可能需要专门设置单词换行以断开长连续字符串。

Answer 2

写：

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

填充&边界总是增加宽度的元件。