Question

我在html模板中有下一个导航块

<nav class="navigation">
    <ul class="nav">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>
</nav>

用css

.navigation {
     padding: 0 0 19px;
 }

.nav {
    font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
    text-align: justify;
    text-align-last: justify;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav:after {
    content: "";
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.nav li {
    display: inline-block;
}
.nav a {
    color: #020202;
}

项目必须在导航块中对齐并占据整个宽度。如果我使用上面的代码，它们就是。

但是，如果我在每个'li'之后移除新行，则所有项目都向右移动，而它们之间没有空格

<nav class="navigation">
    <ul class="nav">
        <li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li><li><a href="#">Item 6</a></li>
    </ul>
</nav>

这是正常行为还是我的CSS错了？所有浏览器的行为都是相同的。 Jsfiddle示例：正确 - http://jsfiddle.net/x9zfP/1错误 - http://jsfiddle.net/AMK8z/1/ TNX！

Answer 1

你的CSS错了，“。”用于类，“＃”用于id。你的ul有一个id，所以首先用“#nav”替换所有出现的“.nav”

这里是正确的css：

.navigation {
     padding: 0 0 19px;
}
#nav {
    font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
    text-align: justify;
    text-align-last: justify;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width:100%;
    display:table
}
/* useless
#nav:after {
    content: "";
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
*/
#nav li {
    display: table-cell;
}
#nav a {
    color: #020202;
}

基本上你的父元素需要有一个宽度，而子元素需要属性“display：table-cell”。

Answer 2

这种行为是正常的，因为你的li没有填充或边距，所以没有任何东西可以将拆分分开。

这可以解决您的问题：

.nav li {
    display: inline-block;
    padding: 0 30px;
}

http://jsfiddle.net/AMK8z/1/

Answer 3

由于display: inline-block，行为是预期的。这意味着将考虑元素之间的空白。

另见CSS-Tricks - Fighting the Space Between Inline Block Elements

如果在项目之后删除新行，则li对齐表现很奇怪

3 个答案: