zencd
@zencd

Как спрятать разделитель горизонтального UL, находящийся на конце строки?

Есть горизонтальный (inline) список UL, элементы которого разделены буллитами. Список длинный и разнесён на несколько строк.

Как сделать чтобы не отображались те буллиты что находятся на конце строки?

Хорошо:
Rainbow • Television • Interpol • The Shins
Whitesnake • The Killers • 16 Horsepower

Плохо:
Rainbow • Television • Interpol • The Shins •
Whitesnake • The Killers • 16 Horsepower

Совместимость: современные браузеры.
  • Вопрос задан
  • 2790 просмотров
Пригласить эксперта
Ответы на вопрос 4
aen
@aen
Keep calm and 'use strict';
Есть один финт, правда грязный. Для каждого элемента списка в псевдоэлемент :before засуньте буллит. Ваша макет будет выглядеть как то так:

• Rainbow • Television • Interpol • The Shins
• Whitesnake • The Killers • 16 Horsepower

Далее контейнер со списком с помощью отрицательного margin-left сместите влево на такое количество пикселей, чтобы буллиты первых слов в строке скрывались под внешним контейнером.
Ответ написан
bonflash
@bonflash
Вёрстка, фронтенд
Если есть возможность как-то предсказать число элементов в строке, можно воспользоваться псевдоклассом :nth-child в совокупности с :after или :before. Например, правила ниже добавят буллит после каждого элемента, кроме каждого четвёртого.

.some-element:after{
   content:'•';
}
.some-element:nth-child(4n+4):after{
   content:'';
}
Ответ написан
HDApache
@HDApache
PHP программист
Может такой вариант?
для теста изменяйте width у .wrap

HTML:
<div class="wrap">
    <ul>
        <li>Rainbow</li>
        <li>Television</li>
        <li>Interpol</li>
        <li>The Shins</li>
        <li>Whitesnake</li>
        <li>The Killers</li>
        <li>16 Horsepower</li>
    </ul>
</div>


CSS:
.wrap {
    width: 300px;
    overflow: hidden;
}
.wrap ul {
    margin: 0 0 0 -25px;
    padding: 0;
}
.wrap ul > li {
    margin-left: 25px;
    white-space: nowrap;
    float: left;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы