Question

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

我以各种方式实现这一目标。对于元素的垂直堆叠，我有时会使用<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之外，所有现代浏览器都支持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支持:last-child（来自CSS2）（仅在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/

Answer 3

你的例子中有这样的事情：

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

div span{
   border-left: solid black 1px;
}
div span:last-child{
   border:none;
}

不需要额外的课程。

Answer 4

首先，您可以将其简化为：

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

span {
    border-right: solid black 1px;
}
span.end {
    border-right: none;
}

如果您愿意在旧版浏览器中放弃一些支持，可以使用:last-child伪类来减少对此的支持：

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

span {
    border-right: solid black 1px;
}
span:last-child {
    border-right: none;
}

Answer 5

这样的东西？

CSS：

#note_list span {
    display:inline-block;
     padding:0 10px;
}
.notend {
    border-right:1px solid #000000;
}

HTML：

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

Answer 6

我经常想要一系列带有分号的物品。

以下是我为此所做的事情：

.semi-list span:not(:last-of-type)::after {
  content: "; ";
 }

<div class="semi-list">
  <span>Item One</span>
  <span>Item Two</span>
  <span>Item Three</span>
</div>

这是一个非常灵活的解决方案。

价：

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

6 个答案: