Html 使用CSS:after和：content显示的空白

我正在尝试使用CSS在项目之间添加逗号来设置

wp\u list\u categories

的输出样式。然而，逗号前出现了一个空格，我真的无法理解它是从哪里来的

我做了一个演示和比较

截图：

HTML:

---

在列表项中浮动锚点将解决此问题：

li a {float:left;}

---

这是因为您有

空格

和

内联

显示。你有两个选择：

删除空格：

<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>

---

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

结束标记位于新行上。回车在HTML中被计为空白，因此在列表项元素的末尾有空白

它出现的原因是您正在使用

display:inline

。当usign

inline

（或

inline block

）时，空格是相关的，因为

inline

表示“将此元素视为纯文本”，因此任何空格都被视为文本的有意部分

消除这种情况的最好方法是将

结束标记与文本的其余部分放在同一行上，这样就不会有空白

有很多其他的方法，但是大多数都涉及到非常粗糙的CSS；简单地关闭空间是目前为止最简单的选择

---

下一个最佳选择是切换到使用

float:left

而不是

display:inline

。这也会解决问题，但会改变整个内容的呈现方式，这将要求您对CSS进行各种其他更改以进行补偿。

好的，我删除我的答案，因为这家伙解释得更好，只需看看这篇文章，非常有用：感谢您的描述性解释。新行是由

wp\u list\u categories

函数插入的，但我已经用str\u replace

str\u replace（“\n”，“，$snip”）将它们剥离。太好了，谢谢！实际上，在这个特殊的例子中，有一个非常简单的css解决方案，不使用浮动，至少对于现代浏览器来说是这样：
#分类列表li a:after{content:”；font size:0；}
我很害怕，假设我不得不使用非常长的HTML行。遗憾的是，我的选择似乎是丑陋的HTML或黑客CSS。我希望CSS中会有某种“修剪”功能来绕过tihs。@MichaelScheper请记住，这个答案已经有好几年了。与此同时，CSS中添加了一些东西，可能会对您有所帮助，现在有些选项是可用的，因为我们不再需要支持较旧的浏览器。2017年的浏览器世界与2013年的浏览器世界大不相同。老实说，我认为原始问题的正确答案是将逗号样式放在
a
标记上，而不是
li
。。。。ie
a:after{…}
而不是
li:after{…}
。我不知道我最初回答问题时为什么没有发现，但是如果你想做同样的事情，试试看。您可能想要的更通用的答案是使用CSS
display:flex
，而不是
display:inline
。你可能还需要做一些其他的改变来配合它，我没有时间详细介绍，但请查阅一下，看看它是如何进行的。
li a {float:left;}

<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>

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