Question

我有以下html片段：

<div>
    <a class="item" href="http://google.com">Google</a>,
    <a class="item" href="http://yahoo.com">Yahoo</a>,
    <a class="item" href="http://yandex.com">Yandex</a>
</div>

现在它显示如下：

Google, Yahoo, Yandex

我需要它显示如下：

Google,
Yahoo,
Yandex

可以通过修改.item类的CSS属性来完成吗？？（没有插入新标签（例如BR）而不触及逗号标志）？

我试过

.item {
    clear: both;
    float: left;    
}

但是所有逗号都留在第一行。

Answer 1

也许这可行，

添加一个空字符串，而不是在css中添加一个新逗号并删除或更改旧字符的颜色

a:before {
    content:'';
    display: block; 
}

<强> jsFiddle DEMO

Answer 2

从标记中删除逗号并执行此操作

.item { display:block;}
.item:after {content:" ,"}

http://jsfiddle.net/c6F4s/2/

Answer 3

如上所述，使用:after选择器添加逗号怎么样：

.item:after 
{
    content:" ,"
}

您将隐藏.item元素之外的任何字体：

#items
{
    font-size: 0;
}

并在.item元素内再次将font-size设置为默认值：

.item 
{
     font-size: medium;
     display:block;
}

并使用display: block;，以便为每一行设置一个项目。

并删除最后一个逗号：

.item:last-child:after
{
    content: "";
}

jsFiddle

<强>更新

如果无法定义项目的父元素，可以使用jQuery / javascript执行此操作。 Css不支持父选择，因此不可能：

$('.item').parent().css('font-size', '0');

使用css和外部文本每行显示一个元素

3 个答案:

jsFiddle

jQuery example