Div/List 100％width + padding + bottom對齊

Question

Noob問題.. 我似乎無法得到所有3個方面。

list-style-type: none; 
    background-color: red; 
    padding-left: 40px; 
    padding-right: 40px; 
    bottom: 40px; 
    position: fixed; 
    width: auto; 

目前該列表不會延伸100％+填充。 如果我將寬度更改爲100％，則右側的填充消失。 如果我將位置更改爲'相對'，那麼它看起來就是我想要的方式，但顯然不會與頁面底部對齊。 幫助？

Answer 1

可以使用box-sizing property，設置爲border-box：

在此元素的指定的寬度和高度（和相應的最小/最大屬性）確定該元件的邊界框。也就是，在元素上指定的任何填充或邊框都被佈置並繪製在此指定的寬度和高度內。內容寬度和高度是通過從指定的「寬度」和「高度」屬性中減去相應邊的邊框和填充寬度來計算的。

elem { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

JSFiddle demo。

Answer 2

右邊距並不真正消失，但元素的寬度按您指定的寬度計算+填充邊框。所以，當你將寬度設置爲100％並將填充設置爲80像素時，則元素變得比身體寬80px。

您可以通過添加box-sizing: border-box來更改此行爲。把它們放在一起：

ul{ 
 
    list-style-type: none; 
 
    background-color: red; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    bottom: 40px; 
 
    position: fixed; 
 
    
 
    /* Add both lines below */ 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
li { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li>Testa</li>  
 
    <li>Testb</li>  
 
    <li>Testc</li>  
 
    <li>Testd</li>  
 
    <li>Teste</li>  
 
    <li>Testf</li>  
 
    <li>Testg</li> 
 
    <li>Testh</li>  
 
    <li>Testi</li> 
 
    <li>Testj</li>  
 
    <li>Testk</li> 
 
    <li>Testl</li>  
 
    <li>Testm</li> 
 
    <li>Testn</li>  
 
    <li>Testo</li> 
 
    <li>Testp</li>  
 
    <li>Testq</li> 
 
    <li>Testr</li>  
 
    <li>Tests</li> 
 
</ul>