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

在布局网站时，我经常想做的一件事是让一些元素相邻，两者之间有分隔符。例如，如果我有3个元素，我想要两个分隔符之间，任何一方都没有。

我以各种方式实现这一点。对于元素的垂直堆叠，我有时使用< hr /&gt ;.大概地，我可能会做一些类似的事情：

<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文件中获取样式。

解决方法

用这个：

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

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

除了第一个跨度之外，这将适用于所有边界。

除IE6之外，所有现代浏览器都支持adjacent sibling selector()。

另一种方法是这样做，这有时更好，因为您可以将“菜单按钮”的所有声明保留在一个块中：

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，因为：IE7 / 8中支持first-child(来自CSS2)，并且：last-child(仅在CSS3中引入)不是。