没有hacks的元素之间的分隔符 [英] Separators between elements without hacks

问题描述

在布置网站时，我经常想做的一件事是使一些元素彼此相邻，在它们之间有分隔符。例如，如果我有3个元素，我想在它们之间有两个分隔符，并且在任何一端都没有。

我以各种方式实现。对于垂直堆叠元素，我有时使用< hr /> 。水平地，我可以做类似的事情：

 < 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/

这将应用 border-left 到所有 span 除外。

相邻的同级选择器（ + ）在除IE6之外的所有新型浏览器中都受支持。

$另一种方式是这样做，这有时更好，因为你可以保留菜单按钮的所有声明在一个块：

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

  #menu span {
 border-left：solid black 1px; 
 / * 
 a：束; 
 of：stuff; 
 * / 
} 
 #menu span：first-child {
 border-left：0 
} 
  pre> 
 
 
这与第一个解决方案具有完全相同的浏览器支持。
 
 
 
请注意，如果你喜欢这个解决方案，最好使用：first-child 而不是：last-child ，因为：first-child （来自CSS2）在IE7 / 8和：last-child （仅在CSS3！ 。
 
One thing I often want to do when laying out a website is to have some elements next to each other, with separators between them. For instance, if I have 3 elements, I'd want 2 separators between them, and nothing at either end.

I achieve this in various ways. For vertical stacking of elements, I sometimes use <hr />. Horiztonally, I might do something like:
<div>
    <span class="notend">things</span>
    <span class="notend">stuff</span>
    <span>items</span>
</div>

.notend {
    border-right: solid black 1px;
}
Is there a more semantic way of doing this? I want to have separators between elements without putting styling elements into the html, or using non-semantic classes. I don't mind of this requires hacky css, I just want to get stuff to do with styling away from the html files.
解决方案
Use this:
#menu span + span {
    border-left: solid black 1px;
}
http://jsfiddle.net/thirtydot/QxZ6D/

That will apply border-left to all except the first span.

The adjacent sibling selector (+) is supported in all modern browsers except IE6.



Another way to do it is this, which is sometimes nicer because you can keep all the declarations for the "menu buttons" in one block:

http://jsfiddle.net/thirtydot/QxZ6D/1/
#menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}
This has exactly the same level of browser support as the first solution.

Note that if you like this solution, it's better to use :first-child rather than :last-child, because :first-child (from CSS2) is supported in IE7/8 and :last-child (only introduced in CSS3!) isn't.

                        
这篇关于没有hacks的元素之间的分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！