html - 如果删除元素后的新行， li 对齐行为会很奇怪

Question

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

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

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

但是如果我在每个“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/ 谢谢!

Answer 1

该行为是预期的，因为 display: inline-block .这意味着将考虑元素之间的空格。

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