Сепараторы между элементами без хаков

Одна вещь, которую я часто хочу делать при размещении веб-сайта, - это иметь некоторые элементы рядом друг с другом, с разделителями между ними. Например, если у меня есть 3 элемента, я бы хотел, чтобы между ними было два разделителя, и ничто в обоих концах.

Я достигаю этого разными способами. Для вертикальной укладки элементов я иногда использую <hr />. Горизонтально, я мог бы сделать что-то вроде:

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

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

Есть ли более семантический способ сделать это? Я хочу иметь разделители между элементами, не вставляя элементы стиля в html, или используя не семантические классы. Я не возражаю, что это требует взломать css, я просто хочу, чтобы материал делался с укладкой из html файлов.

Ответ 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!) isn "т.

Ответ 2

Вы можете сделать так же:

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

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

В этом методе вы можете также использовать другие разделители, такие как /, \, .

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

Ответ 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;
}

нет необходимости в дополнительных классах.

Ответ 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;
}

Ответ 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>

Ответ 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>

Это довольно гибкое решение.

Ref: