Question

我知道有很多关于ul自动缩进的问题，我已经尝试了很多这些答案并没有成功，我还有一个额外的问题，当添加一个带填充的容器时，它似乎只填充一侧。

基本上我正试图将ul条固定在窗口的底部。这个栏位于一个容器（主）内，从窗口的任一侧给它填充。它设计为随窗口宽度自动扩展（液体），因此没有超出初始宽度=设备宽度的定义宽度。

当它自己编写时，我在ul的左侧得到一个小的自动缩进。我尝试在ul和li元素中添加0填充和边距，这似乎与其他元素一样没有效果。当我添加容器时，它似乎只填充有缩进问题的一面。我确信它简单而愚蠢，但我感谢你的帮助。

作为旁边...... li元素的宽度为33.3％是由于在stackoverflow上使用了间隔框hack。使用它不会改变/帮助/伤害这个问题中的任何东西，所以我省略了它以保持这个更简单。

JSFiddle Link http://jsfiddle.net/XdHXf/1/

HTML

<div class="main">
    <nav>
            <ul>
                <li><a href="#">Main</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
    </nav>
</div>

CSS

.main{
    width: 100%;
    padding: 0 1em;
}
nav{
    position: fixed;
    bottom: 0px;
    background: #455868;
    width: 100%;
    z-index: 1000;
}
nav ul {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
nav li{
    position: relative;
    float: left;
    width: 33.3%;
    text-align: center;
    background: #455868;
    padding: 0;
    margin: 0;
}
nav li a{
    text-decoration: none;
    display: inline-block;
    width: 100%;
    padding: 15px 0;
}

Answer 1

这来自浏览器的内置样式表。如果你添加

body {
    margin: 0;
}

小额外的空间消失了。

作为替代方案，当您在Normalized CSS下查看Fiddle Options时，会得到类似的结果。

ul自动缩进以及仅填充一侧？

1 个答案: