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/

内容的目的是什么：＆＃39; ＆＃39 ;? 据我所知，它增加了一个空间，直到“导航”的结尾。 div，但为什么这有助于对齐列表元素？

Answer 1

具体来说，content: ''声明的目的是可以呈现:after伪元素。没有它，就不会有伪元素，并且就好像:after规则完全缺失一样。

您引用的元素末尾的空格是100％宽度的内联块。这会导致它换行到列表元素之后的下一行，因为没有足够的空间将它放在同一行上。由于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>

添加内容的目的是什么：＆＃39; ＆＃39;在以下代码中？

1 个答案: