html - 下面代码中添加内容0x​​104567910的目的是什么？

Question

我看到了以下 CSS，用于水平对齐 div 中的元素

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

#nav {
text-align: justify;
min-width: 500px;
}

#nav:after {
content: '';
display: inline-block;
width: 100%;
}

#nav li {
display: inline-block;
} 

http://jsfiddle.net/danield770/9hh86/

内容“”的目的是什么？ 我知道它会在“nav”div 的末尾添加一个空格，但是为什么这有助于对齐列表元素？

Answer 1

具体而言，content: '' 声明的目的是为了能够呈现 :after 伪元素。没有它，就不会有伪元素，就好像 :after 规则完全丢失了。

您引用的元素末尾的空间是 100% 宽度的内联 block 。这会导致它换行到列表元素之后的下一行，因为没有足够的空间将其放在同一行上。由于 text-align: justify 声明，这种换行会强制其前面的行中的列表元素对齐。

您可以通过向其添加轮廓来查看 :after 的具体渲染位置，如下所示:

#nav {
  text-align: justify;
  min-width: 500px;
  padding: 0;
}

#nav:after {
  content: '';
  display: inline-block;
  width: 100%;
  outline: 1px solid;
}

#nav li {
  display: inline-block;
}

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>