填充總是推動並增加了我的容器

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; 
} 

填充&邊界總是增加寬度的元件。