Горизонтальный маркированный список

@Kapo · Регистрация: 03.05.2014

Author24 — интернет-сервис помощи студентам

Весь вечер бьюсь и не могу сделать горизонтальный МАРКИРОВАНЫЙ список. Как только список становится горизонтальным, маркеры пропадают, за исключением использования способа с float:left, но используя его, появляются какие то кривые отступы, которые не могу убрать... Вобщем, кто знает, просто дайте готовый код пожалуйста, а дальше сам разберусь.

Вот пример того, что мне нужно:

< Категория < Категория 2 уровня < Категория 3 уровня < Категория 4 уровня

< - это маркер, у вас в примере пускай он будет любой, лишь бы был. Отступы, самое главное, пускай они будут нулевыми везде, как в моем примере

@Qwerty_Wasd · 01.10.2017, 23:41

Kapo, как вариант Песочница

HTML5

1
2
3

<ul>
    <li>bla</li><li>bla</li><li>bla</li>
</ul>

CSS

1 2	li{display:inline-block;border:1px solid red;} li:before{content: "\00BB \0020";margin-left:15px;}

Название: Screenshot_3.png
Просмотров: 55

Размер: 804 байт

Нашел вам еще пример(не мой, автора не знаю) =>ТЫК<=

HTML5

<div class="menu">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="sotrud.html">Сотрудники</a></li>
<li><a href="docum.html">Документы</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="photo.html">Фотоальбом</a></li>
</ul>
</div>

CSS

* {
    padding 0;
    margin: 0;
}
 
.menu {
    background: #1A9C32;
    height: 50px
}
 
.menu ul {
    padding: 0;
}
 
.menu ul:after {
    clear: both;
    display: table;
    width: 100%;
    height: 0;
    content: ' ';
}
 
.menu li {
    float: left;
    background: url(https://help.gnome.org/users/gnome-help/stable/figures/preferences-desktop-accessibility-symbolic.svg) 7px center no-repeat;
    font-family: Arial, sans-serif;
    font-size: 20px;
    list-style: none;
}
 
.menu li:hover {
    background: url(https://help.gnome.org/users/gnome-help/stable/figures/preferences-desktop-accessibility-symbolic.svg) 7px center no-repeat #23BA15;
}
 
.menu a {
    display: block;
    padding: 0 30px;
    line-height: 50px;
}

@Kapo · 02.10.2017, 16:45 **[ТС]**

Работает!) спасибо)) о таком свойстве я и не знал, теперь может еще где то применю

@Kapo 7 / 4 / 1 Регистрация: 03.05.2014 Сообщений: 77
		1
	Горизонтальный маркированный список 01.10.2017, 22:10. Показов 6174. Ответов 2 Метки нет (Все метки) Весь вечер бьюсь и не могу сделать горизонтальный МАРКИРОВАНЫЙ список. Как только список становится горизонтальным, маркеры пропадают, за исключением использования способа с float:left, но используя его, появляются какие то кривые отступы, которые не могу убрать... Вобщем, кто знает, просто дайте готовый код пожалуйста, а дальше сам разберусь. Вот пример того, что мне нужно: < Категория < Категория 2 уровня < Категория 3 уровня < Категория 4 уровня < - это маркер, у вас в примере пускай он будет любой, лишь бы был. Отступы, самое главное, пускай они будут нулевыми везде, как в моем примере 0

@Kapo 7 / 4 / 1 Регистрация: 03.05.2014 Сообщений: 77
	02.10.2017, 16:45 [ТС]	3
	Работает!) спасибо)) о таком свойстве я и не знал, теперь может еще где то применю 0

Горизонтальный маркированный список

Решение