Question

我正在尝试创建一个简单的水平导航。我已经相当彻底地搜索了堆栈溢出，并找到了如何删除li元素之间的空白的几个答案。我已经尝试添加和删除html元素（在一行中编写li标签，并添加div标签）。我尝试将li标签的'display：inline'属性更改为'display：block'和'float：left'。我还尝试了堆叠溢出用户建议的其他几件事。

没有什么对我有用。

我确信解决方案很简单，但我所做的一切似乎都无法正常工作。非常感谢任何帮助。

我的HTML是：

<div class="nav">
<ul>
<li><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>

我的CSS是：

.nav {
    height: 56px;
    width: 100%;
    }
.nav ul {
    height: 100%;
    float: right;
    padding: 0px;
    }
.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    display: inline;
    width: 100%;
    padding: 0px;
    }
.nav ul li a {
    color: #333;
    text-transform: none;
    text-decoration: none;
    display: inline-block;
    padding: 0 .5em;
    background: transparent;
    }
.nav ul li a:hover {
    color: #FFF;
    text-transform: none;
    text-decoration: none;
    background: #333;
    }
.active {
    color: #FFF !important;
    background: #333 !important;
    }

Answer 1

让你的<li>浮动并移除宽度：

.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    float: left;
    padding: 0px;
    list-style:none;
}

我还为列表样式添加了'none'，因为删除显示后子弹将再次显示。

我不会使用负边距，因为上面是一个更优雅的解决方案，而且不那么混乱。恕我直言，负利润是黑客，只应作为最后的手段......

这是我的小提琴：http://jsfiddle.net/5dBVg/1/

Answer 2

使用float来对齐元素并在你的ul之后清除它们是一个工作演示 http://jsfiddle.net/HarishBoke/dh5eZ/

HTML

<div class="nav">
    <ul class="clearfix">
        <li><a href="#" class="active">One</a>        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</div>

CSS

.nav {
    height: 56px;
    width: 100%;
}
.nav ul {
    height: 100%;
    padding: 0px;
    list-style:none;
}
.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    padding: 0px;
    float:left;
    background:#ccc;
}
.nav ul li a {
    color: #333;
    text-transform: none;
    text-decoration: none;
    display: inline-block;
    padding: 0 .5em;
    background: transparent;
}
.nav ul li a:hover {
    color: #FFF;
    text-transform: none;
    text-decoration: none;
    background: #333;
}
.active {
    color: #FFF !important;
    background: #333 !important;
}
.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}

Answer 3

您可以添加：

li {
    margin:-2px;
}

这会缩回间距

EXAMPLE

Answer 4

尝试在样式中为li标签添加样式。

li {
    margin:-2px;
}

从li元素中删除空格

4 个答案: