Добавьте разделитель труб после элементов в неупорядоченном списке, если этот элемент не является последним в строке

Ответ 1

Теперь это возможно с помощью flex-box

Ключи к этой технике:

• Элемент контейнера, установленный на overflow: hidden.
• Установите justify-content: space-between на ul (который является гибкой коробкой), чтобы заставить его гибкие элементы растягиваться на левый и правый края.
• Установите margin-left: -1px в ul, чтобы его левый край переполнил контейнер.
• Установите border-left: 1px на гибкие элементы li.

Контейнер действует как маска, скрывающая границы любых гибких элементов, касающихся левого края.

.flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
    <ul>
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
    </ul>
</div>

Ответ 2

Просто

li + li::before {
    content: " | ";
}

Конечно, это фактически не решает проблему ОП. Он хочет высвободить вертикальные полосы в начале и конце строк в зависимости от того, где они сломаны. Я выйду на конечность и утвержу, что эта проблема не разрешима с помощью CSS, и даже не с JS, если вы не захотите существенно переписать логику текстового измерения/компоновки/маршрутизации двигателя браузера.

Единственные фрагменты CSS, насколько я вижу, "знают" о разрыве строки, во-первых, псевдоэлемент ::first-line, который нам не помогает, - в любом случае он ограничен несколько презентационных атрибутов и не работает вместе с такими вещами, как:: before и:: after. Единственный другой аспект CSS, который я могу придумать, в какой-то степени раскрывает прерывание строки - перенос. Тем не менее, перенос означает все добавление символа (обычно тире) в конец строк в определенных ситуациях, тогда как здесь нас беспокоит удаление символа (вертикальная линия), поэтому я просто не вижу, как применять любую логику, связанную с переносом, даже с помощью таких свойств, как hyphenate-character.

У нас есть свойство word-spacing, которое применяется внутри линии, но не в начале строки и концах, что кажется многообещающим, но определяет ширину пробела между словами, а не характер (ы), которые будут использоваться.

Интересно, есть ли способ использовать свойство text-overflow, которое имеет малоизвестную способность принимать два значения для отображения текста переполнения слева и справа, как в

text-overflow: '' '';

но, похоже, нет никакого очевидного способа получить от A до B.

Ответ 3

Прежде чем показывать код, стоит упомянуть, что IE8 поддерживает :first-child, но не :last-child, поэтому в подобных ситуациях вы должны использовать псевдокласс класса :first-child.

Demo

#menu{
    list-style: none;
}
#menu li{
    display: inline;
    padding: 0 10px;
    border-left: solid 1px black;
}
#menu li:first-child{
    border-left: none;
}

<ul id="menu">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>More animals</li>
</ul>

Ответ 4

Используйте псевдо-селектор :after. Посмотрите http://jsfiddle.net/A52T8/1/

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }

EDIT:

Решение jQuery:

HTML:

<div>
    <ul id="animals">
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
        <li>Monkey</li>
        <li>Hedgehog</li>
        <li>Chicken</li>
        <li>Rabbit</li>
        <li>Gorilla</li>
    </ul>
</div>

CSS

div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }

JQuery

var maxWidth = 300, // Your div max-width
    totalWidth = 0;
$('#animals li').each(function(){
    var currentWidth = $(this).outerWidth(),
        nextWidth = $(this).next().outerWidth();
    totalWidth += currentWidth;
    if ( (totalWidth + nextWidth) > maxWidth ) {
        $(this).css('border', 'none');
        totalWidth = 0;
    }
});

Взгляните сюда. Я также добавил еще несколько животных. http://jsfiddle.net/A52T8/10/

Ответ 5

Одним из решений является стиль левой границы:

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

Однако это может не дать желаемых результатов, если все списки обернуты, как в вашем примере. То есть это даст что-то вроде:

foo | bar | baz
 | bob | bill
 | judy

Ответ 6

Я знаю, что я немного опаздываю на вечеринку, но если вы можете мириться с выравниванием строк, один взломать, чтобы положить трубы перед элементами, а затем поместить маску над левым краем, в основном так:

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

более полный пример: http://jsbin.com/hoyaduxi/1/edit

Ответ 7

Сегодня я столкнулся с решением, которое, похоже, уже не существует и, похоже, работает до сих пор. Принятый ответ не работает как есть на IE10, но это делает. http://codepen.io/vithun/pen/yDsjf/ кредит автору конечно!

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 1px solid;
}

<div class="pipe-separated-list-container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty</li>
    <li>Twenty One</li>
    <li>Twenty Two</li>
    <li>Twenty Three</li>
    <li>Twenty Four</li>
    <li>Twenty Five</li>
    <li>Twenty Six</li>
    <li>Twenty Seven</li>
    <li>Twenty Eight</li>
    <li>Twenty Nine</li>
    <li>Thirty</li>
  </ul>
</div>

Ответ 8

Да, вам нужно будет использовать псевдоэлементы и псевдоселектора: http://jsfiddle.net/cYky9/

Ответ 9

Вы можете использовать следующий CSS для решения.

ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }

Должен работать и на IE8 +.