Question

http://forumgallery.rollinleonard.com/artists.php

我似乎无法摆脱列表中逗号之前的空格。

没有意义！

这是我的CSS的相关部分

.artistlist {
    margin: 0px;
    padding: 0;
    }

li.artistlist {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: .75em;
    line-height: 1.5em;
    word-spacing: 1px;
    }
li.artistlist:after {
    content:", ";
    }
.artistlist li:last-child:after {
    content:"";
    }
ul li{
    margin:0;
}

Answer 1

我做了一个small demo，用较少的CSS代码在逗号之前没有空格。在Mac上使用Chrome和Firefox进行测试。

查看更新后的页面，发现问题所在。在此处阅读有关不同浏览器中可能的空白错误的更多信息：http://www.42inc.com/~estephen/htmlner/whitespacebugs.html

你的HTML看起来像这样：

<li class="artistlist"> 
     <a href="#" onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a> 
        </li>

尝试删除标记之间的空白，然后呈现正常：

<li class="artistlist"><a href="#"  onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a></li>

Answer 2

对于像space这样的特殊字符，您应该在内容中使用Unicode。试试这个：

li.artistlist:after {
    content:",\00a0";
}

内联列表li：last-child：在{content：“，”}之后我可以摆脱它创造的额外空间吗？

2 个答案: