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

19

Одна вещь, которую я часто хочу делать при размещении веб-сайта, - это иметь некоторые элементы рядом друг с другом, с разделителями между ними. Например, если у меня есть 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-файлов.

    
задан Oliver 11.10.2011 в 18:47
источник

5 ответов

32

Используйте это:

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

Ссылка

Это применит border-left ко всем, кроме первого span .

смежный селектор селектора ( + ) поддерживается во всех современных браузерах, кроме IE6.

Другой способ сделать это - это, что иногда лучше, потому что вы можете хранить все объявления для «кнопок меню» в одном блоке:

Ссылка

#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 «т.

    
ответ дан thirtydot 11.10.2011 в 18:51
  • Ницца! Хотел бы я найти это раньше. –  Oliver 11.10.2011 в 18:52
  • Меня удивляет, насколько мало известен селектор +. Посмотрите на все: ответы последнего ребенка здесь и в другом месте на сайте ... –  BoltClock♦ 11.10.2011 в 18:54
  • IE6 не поддерживает то, что делает каждый другой браузер в мире !? Я так разочарован ... –  mclark1129 11.10.2011 в 20:23
  • "во всех современных браузерах, кроме IE6" - почему я подразумеваю, что IE6 - это современный браузер? –  thirtydot 18.11.2011 в 17:12
4

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

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

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

}

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

Ссылка

    
ответ дан sandeep 11.10.2011 в 18:59
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;
}

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

    
ответ дан Andy 11.10.2011 в 18:52
2

Хорошо для начала, вы можете упростить это:

<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;
}
    
ответ дан Eric 11.10.2011 в 18:51
  • @Oliver, и для достижения «element1 | element2 | element3» вы, вероятно, захотите сделать border-right вместо border-left. Или сделайте класс специального случая первым, а не последним. –  mclark1129 11.10.2011 в 18:55
  • Да, я замечаю это сейчас. Я склоняюсь к смещению слева и справа (очень неудобно при попытке навигации). –  Oliver 11.10.2011 в 19:06
  • @MikeC: Хороший момент! Я бы заметил, что если бы я действительно прочитал код, который писал. –  Eric 11.10.2011 в 19:46
1

Что-то вроде этого?

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>
    
ответ дан Biotox 11.10.2011 в 18:55