Question

为什么我看到这两个导航元素在屏幕上的显示方式有所不同？从这个fiddle可以看出，未格式化的导航在到达div的末尾时没有正确换行，而是通过边界溢出，而格式化的标记表现得如我所料。为什么HTML中的空格应该没有意义呢？

链接之间没有换行符：

<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a><a href="/">Link 5</a><a href="/">Link 6</a><a href="/">Link 7</a><a href="/">Link 8</a>                </nav>

链接之间有换行符：

<nav class="service__nav">
    <a href="/">Link 1</a>
    <a href="/">Link 2</a>
    <a href="/">Link 3</a>
    <a href="/">Link 4</a>
    <a href="/">Link 5</a>
    <a href="/">Link 6</a>
    <a href="/">Link 7</a>
    <a href="/">Link 8</a>
</nav>

Answer 1

空格表示单词的结尾。未格式化的html不会换行，因为：

元素之间没有空格，表示单词的结尾，因此浏览器不会断开它们之间的界限：
```
<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a>
```
<a>个元素有空格但no-wrap告诉浏览器不要破坏它们内部的行：
```
.service__nav a {
    white-space: nowrap;
}
```

您不必格式化HTML，只需在<a>元素之间添加空格：

<nav class="service__nav">
<a href="/">LinkTest One</a> <a href="/">LinkTest Two</a> <a href="/">LinkTest Three</a> <a href="/">LinkTest Four</a> 
</nav>

查看更新的JSFiddle

影响显示的标记格式

1 个答案: