CSS li bullet не отображается, когда li является встроенным блоком

Question

Если вы хотите, чтобы li был встроенным блоком, точки маркера больше не показываются.

ul { 
 
    list-style-type: circle; 
 
} 
 
ul.columns>li { 
 
    display: inline-block; 
 
    padding-right: 1cm; 
 
    margin-left: 20px; 
 
}

<h1>Vertical</h1> 
 
<ul> 
 
    <li><a class="openPage">Besoins en magnésium</a></li> 
 
    <li><a class="openPage">Besoins en azote</a></li> 
 
</ul> 
 

 
<h1>Horizotal is missing bullets</h1> 
 
<ul class="columns"> 
 
    <li><a class="openPage">Besoins en magnésium</a></li> 
 
    <li><a class="openPage">Besoins en azote</a></li> 
 
</ul>

Смотрите мой скрипку http://jsfiddle.net/stephanedeluca/9xdkp3q7/2/

Answer 1

Это не самый хороший способ сделать это точно. Но я вспоминаю это на самом деле не имея каких-либо других убедительных результатов ..

ul.columns>li:before { content:'\ffed'; margin-right:0.5em; } 

EDIT: Я понимаю, что ответ уже размещен, но один использует абсолютное позиционирование и является менее эффективным, в целом, на мой взгляд, а другой более сложный также, не знаете, почему на нем требуется соответствующее позиционирование? Кроме того, интервал уже отсортирован для вас таким образом. И это всего лишь 2 атрибута, проще.

Answer 2

Вы можете вручную добавить пули в :before: псевдо-элемент.

* { 
 
    font-family: sans-serif; 
 
} 
 
ul { 
 
    list-style-type: circle; 
 
} 
 
ul.columns>li { 
 
    display: inline-block; 
 
    padding-right: 1cm; 
 
    margin-left: 20px; 
 
} 
 
ul.columns>li:before { 
 
    content: '◦'; 
 
    position: relative; 
 
    font-size: 1.3em; 
 
    font-weight: bold; 
 
    top: 1px; 
 
    left: -3px; 
 
}

<h1>Vertical</h1> 
 

 
<ul> 
 
    <li><a class="openPage">Besoins en magnésium</a> 
 
    </li> 
 
    <li><a class="openPage">Besoins en azote</a> 
 
    </li> 
 
</ul> 
 

 
<h1>Horizotal is missing bullets</h1> 
 

 
<ul class="columns"> 
 
    <li><a class="openPage">Besoins en magnésium</a> 
 
    </li> 
 
    <li><a class="openPage">Besoins en azote</a> 
 
    </li> 
 
</ul>

Answer 3

пуля точки или иконки список стиль работает только для display: list-item CSS свойство применяется элементов. Это свойство применяется по умолчанию к элементам li, которые вы теперь переопределяете, применяя display: inline-block. Следовательно, значки стиля списка исчезнут.

Кажется, вы пытаетесь получить два элемента li, смежные друг с другом. Ну, в этом случае вы должны обязательно использовать display: inline-block. а затем использовать псевдокласс с дисплеем как list-item. Это решит вашу проблему.

ul.columns>li:before{ 
    content: ""; 
    display: list-item; 
    position: absolute; 
} 

Working Fiddle

Answer 4

При первом создании списка значение по умолчанию display установлено на list-item. Когда вы меняете его на display: inline-block;, он больше не считается элементом списка.

Вот некоторые сайты, которые имеют хорошую информацию о списках:

- http://www.w3.org/TR/css3-lists/#declaring-a-list-item

- http://css-tricks.com/almanac/properties/l/list-style/