在以下代码中添加内容：''的目的是啥？

Posted 2023-04-13

【中文标题】在以下代码中添加内容：\'\'的目的是啥？

【英文标题】：What is the purpose of adding content:' ' in the following code?在以下代码中添加内容：''的目的是什么？

【发布时间】：2016-03-06 06:21:40

【问题描述】：

我看到了以下 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/

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

【问题讨论】：

从 CSS 中删除该行以了解区别

因为他们没有将 padding 和 margin 设置为 0，而是使用 content 属性设置 0 或 ' '。

【参考方案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>

【讨论】：

cmets 中给出了关于小提琴起源的答案的相同解释：***.com/questions/5060923/…

非常感谢。我还在我的 css 中添加了以下内容： * margin: 0px 这样我的图像就可以很好地适合我的页面，但这会导致导航的结束元素非常靠近页面的右侧。有什么简单的方法可以解决吗？