具有 100% 宽度 + 填充 + 底部对齐的 Div/List答案

【问题标题】：Div/List with 100% width + padding + bottom align具有 100% 宽度 + 填充 + 底部对齐的 Div/List
【发布时间】：2014-11-18 19:38:46
【问题描述】：

菜鸟问题.. 我似乎无法了解所有 3 个方面。

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

目前列表不会拉伸 100%+填充。如果我将宽度更改为 100%，则右侧的填充消失。如果我将位置更改为“相对”，那么它看起来就像我想要的那样，但显然不会与页面底部对齐。帮忙？

【问题讨论】：

box-sizing: border-box + width: 100% 可以解决问题。
一段 HTML 会有所帮助。

标签： html css list alignment padding

【解决方案1】：

可以使用box-sizing property，设置为border-box：

此元素上指定的宽度和高度（以及相应的最小/最大属性）确定元素的边框。也就是说，在元素上指定的任何内边距或边框都会在指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。

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

JSFiddle demo.

【讨论】：

【解决方案2】：

右边距并没有真正消失，但元素的宽度计算为您指定的宽度+填充边框。因此，当您将宽度设置为 100% 并将内边距设置为 80 像素时，元素会比主体宽 80 像素。

您可以通过添加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>

【讨论】：