2

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

基本上我正在尝试将 ul 栏固定到窗口底部。此栏位于容器（主）内，以从窗口的任一侧为其提供填充）。它被设计为随着窗口的宽度（液态）自动扩展，因此没有超出初始宽度=设备宽度的定义宽度。

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

顺便说一句.. li 元素的宽度为 33.3% 是由于使用了 stackoverflow 上的间距框 hack。它的使用不会改变/帮助/伤害这个问题的任何东西，所以我省略了它以保持更简单一点。

JSFiddle 链接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;
}
4

1 回答 1

2

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

body {
    margin: 0;
}

小的额外空间消失了。

作为替代方案，当您Normalized CSS在Fiddle Options.

于 2013-05-06T21:55:07.400 回答