html - 从 li 元素中删除空格

Question

我正在尝试创建一个简单的水平导航。我相当彻底地搜索了堆栈溢出，并找到了几个关于如何删除 li 元素之间的空格的答案。我试过添加和删除 html 元素(在一行中编写 li 标签，并添加 div 标签)。我尝试将 li 标签的“显示:内联”属性更改为“显示: block ”和“ float :左”。我还尝试了堆栈溢出用户建议的其他几种方法。

没有什么对我有用。

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

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

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