Question

Noob问题.. 我似乎无法获得所有这三个方面。

    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％并将填充设置为80px时，则元素将比正文宽80px。

您可以通过添加box-sizing: border-box来更改此行为。将它们组合在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

Div / List具有100％宽度+填充+底部对齐

2 个答案: