html – 使用CSS出现的空格：after和：content

概述我试图使用CSS来设置wp_list_categories的输出,以便在项之间放置逗号.然而,在逗号之前出现了一个空格,我真的无法理解它的来源！ 我做了一个jsbin来演示和比较. 截图： HTML： <ul id="category-listing"> <li class="cat-item cat-item-6"><a href="#" title="View all posts fi 我试图使用CSS来设置wp_List_categorIEs的输出,以便在项之间放置逗号.然而,在逗号之前出现了一个空格,我真的无法理解它的来源！

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

截图：

HTML：

<ul ID="category-Listing">    <li ><a href="#" title="VIEw all posts filed under branding">branding</a></li>    <li ><a href="#" title="VIEw all posts filed under Environment">Environment</a></li>    <li ><a href="#" title="VIEw all posts filed under Exhibition">Exhibition</a></li>    <li ><a href="#" title="VIEw all posts filed under Lecture">Lecture</a></li>    <li ><a href="#" title="VIEw all posts filed under Photography">Photography</a></li>    <li ><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: ',';}

解决方法 出现空白区域,因为它存在于HTML代码中.

结束< / li>标签在新行上.回车在HTML中被计为空格,因此您在列表项元素的末尾有空格.

它出现的原因是因为你使用的是display：inline.当使用内联(或内联块)时,空格是相关的,因为内联意味着“将此元素视为纯文本”,因此任何空格都被视为文本的有意部分.

摆脱这个的最好方法是简单地把< / li>在与文本其余部分相同的行上关闭标记,以便那里没有空格.

还有很多其他的方法,但大多数涉及相当Hacky CSS;简单地关闭空间是迄今为止最简单的选择.

下一个最好的选择是切换到使用float：left而不是display：inline.这也将解决问题,但会改变整个事物的呈现方式,这将要求您对CSS进行各种其他更改以进行补偿.

总结

以上是内存溢出为你收集整理的html – 使用CSS出现的空格：after和：content全部内容，希望文章能够帮你解决html – 使用CSS出现的空格：after和：content所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。