使用 CSS 出现的空白 :after 和 :content

Question

我正在尝试使用 CSS 设置 wp_list_categories 的输出样式，以便在项目之间放置逗号。但是，逗号前出现了一个空格，我真的无法理解它来自哪里！

我做了一个jsbin来演示和比较。

截图：

HTML：

<ul id="category-listing">
    <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
</li>
    <li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
</li>
    <li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
</li>
    <li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
</li>
    <li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
</li>
    <li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a>
</li>
</ul>

CSS：

li {
  font-size: 46px;
  display: inline;
  margin: 0;
  padding: 0;
}

#category-listing li:after {
  content: ', ';
}

Answer 1

出现空白是因为它在您的 HTML 代码中。

结束 </li> 标记位于新行上。回车在 HTML 中算作空格，因此列表项元素的末尾有空格。

它出现的原因是因为您使用的是display:inline。当使用inline（或inline-block）时，空格是相关的，因为inline 的意思是“将此元素视为纯文本”，因此任何空格都被视为文本的有意部分。

摆脱这种情况的最佳方法是简单地将</li> 结束标记与文本的其余部分放在同一行，这样那里就没有空白了。

还有很多其他的方法可以解决它，但其中大多数都涉及到相当 hacky 的 CSS；简单地关闭空间是迄今为止最简单的选择。

下一个最佳选择是改用float:left 而不是display:inline。这也将解决问题，但会改变整个事物的呈现方式，这将需要您对 CSS 进行各种其他更改以进行补偿。

Answer 2

这是因为你有spaces 和inline 显示。你有两个选择：

1. 删除空格：

   <ul id="category-listing">
       <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
   </li><li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
   </li><li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
   </li><li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
   </li><li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
   </li><li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a></li>
   </ul>
   

2. 使用float：

   ul {overflow: hidden;}
   ul li {float: left;}
   

Answer 3

在列表项内浮动锚点可以解决这个问题：

li a {float:left;}