元素之间的分隔符没有黑客

Question

在布局网站时,我经常要做的一件事就是让一些元素彼此相邻,并在它们之间使用分隔符.例如,如果我有3个元素,我希望它们之间有两个分隔符,两端都没有.

我以各种方式实现这一目标.对于元素的垂直堆叠,我有时会使用<hr />.Horiztonally,我可能会做类似的事情:

<div>
    <span class="notend">things</span>
    <span class="notend">stuff</span>
    <span>items</span>
</div>

.notend {
    border-right: solid black 1px;
}

有没有更多的语义方式来做到这一点？我想在元素之间使用分隔符,而不是将样式元素放入html中,或者使用非语义类.我不介意这需要hacky css,我只是想从html文件中获取与样式有关的东西.

Answer 1

用这个:

#menu span + span {
    border-left: solid black 1px;
}

http://jsfiddle.net/thirtydot/QxZ6D/

这将适用border-left于除第一个之外的所有人span.

在相邻的兄弟选择器(+)在除IE6的所有现代浏览器都支持.

另一种方法是这样做,这有时更好,因为你可以在一个块中保留"菜单按钮"的所有声明:

http://jsfiddle.net/thirtydot/QxZ6D/1/

#menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}

这与第一个解决方案具有完全相同的浏览器支持级别.

请注意,如果你喜欢这个解决方案,最好使用:first-child而不是:last-child,因为:first-child(来自CSS2)在IE7/8中支持:last-child(并且只在CSS3中引入!)不是.

Answer 2

您也可以这样做：

span {position:relative; margin-left:5px}

span:after {
    content:"|";
    position:absolute;
    left:-5px;
}
span:first-child:after {
    content:"";
}

在这种方法中，你也可以使用其他分隔符一样/，\，.

http://jsfiddle.net/sandeep/UNnxE/