5

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

我做了一个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: ', ';
}
4

3 回答 3

5

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

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

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

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

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

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

于 2013-05-15T11:50:01.183 回答
2

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

li a {float:left;}
于 2013-05-15T11:42:36.637 回答
0

这是因为你有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;}
于 2013-05-15T11:44:35.457 回答