Question

我正在研究这个特定项目的页脚。现在我将它设置为2个无序列表，但是左边的1在第一行左侧有一个额外的空格（FEATURES）。我似乎无法弄明白它是从哪里来的，并且想知道是否有人可以指出我正确的方向或建议修复。

我想避免使用任何硬编码的负边距。

HTML：

<div class="container">
                        <div class="footer">
                            <div class="row menu">
                                <div class="col-md-6">
                                    <ul class="left-side footer-menu">
                                        <li class="right-spacer">FEATURES</li>
                                        <li class="right-spacer">BLOG</li>
                                        <li class="right-spacer">ABOUT</li>
                                        <li class="right-spacer">CONTACT</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="right-side footer-menu">
                                        <li class="left-spacer">PRIVACY</li>
                                        <li class="left-spacer">TERMS</li>
                                        <li class="left-spacer">VIDEO</li>
                                        <li class="left-spacer">SLIDE SHARE</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

CSS：

 .footer {
    width: 100%;
    border-top: 4px solid #d3d3d3;
}
.footer .menu {
    font-size: 15px;
}
.footer .footer-menu li {
    list-style-type: none;
    display: inline;
}
.footer .left-side li {
    float: left;
}
.footer .right-side li {
    float: right;
}
.left-spacer {
    padding-left: 58px;
}
.right-spacer {
    padding-right: 58px;
}

http://jsfiddle.net/rD6aQ/

Answer 1

您忘了清除padding-left中的ul。它等于40px。将此添加到您的CSS：

.footer .menu ul {
    padding-left: 0px;
}

我想这些问题是许多项目中使用reset.css的原因。您更新的jsfiddle是here。

Answer 2

更新

<ul class="left-side footer-menu" >

到

<ul class="left-side footer-menu" style="padding:0px">

ul使用您应删除的默认缩进

Answer 3

<ul>的默认填充为40px（webkit），对于其他浏览器可能略有变化。

只需将padding: 0;添加到ul

即可

<强> Demo

Answer 4

我在这里注意到了多个问题。首先，您使用的是Bootstrap类，如.col-md-6和.row，但不包括bootstrap本身。如果您实际上使用的是Bootstrap并且没有将其包含在小提琴中，那就是一件事。

如果您不打算使用Bootstrap，则需要处理使用float引起的问题：浮动元素从流中取出，因此父元素的高度为零。考虑使用clearfix，或更改为li inline-block显示。

What is a clearfix?

您应该考虑的另一个问题是浏览器具有列表的默认填充/边距。因此，除非您指定自己的填充和边距，否则您的UL最终将使用默认值，例如

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

牢记这一点，你将是安全的）

找出额外空间的来源？

4 个答案: