Разделители между элементами без хаков

Question

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

Я достигаю этого разными способами. Для вертикальной укладки элементов я иногда использую <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-файлов.

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/

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

Я часто хочу иметь ряд элементов с точками между ними.

Вот что я делаю для этого:

.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:

• https://www.w3schools.com/cssref/sel_not.asp
• https://www.w3schools.com/csSref/sel_last-of-type.asp

Answer 6

Как то так?

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>