Пули исчезают с помощью столбцов CSS3

Пули в моих списках исчезают, когда я конвертирую их в столбцы с помощью CSS3. Любые идеи, почему или предложения о том, как их исправить?

См. пример: http://jsfiddle.net/gduDm/1/

ul li {
    list-style-type: disc !important;
    column-break-inside: avoid;
}
ul {
    list-style-type: disc !important;
    margin-top: 1em;
    column-count: 2;
    column-gap: 0.5em;
}

Ответы

Ответ 1

Я думаю, что там есть пули, но они отображаются слева от области просмотра. Попробуйте:

list-style-position: inside;

Ответ 2

Добавление как padding-left, так и отрицательного text-indent к элементам списка, как представляется, приводит к желаемому результату:

ul li {
    padding-left: 1em;
    text-indent: -1em;
}
ul {
    list-style: inside disc;
}

http://jsfiddle.net/mblase75/gduDm/4/

В качестве альтернативы добавьте элемент margin-left в элемент списка (вместо списка) и используйте outside bullets:

ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

http://jsfiddle.net/mblase75/gduDm/9/

Ответ 3

Настройка margin-left:1em заставляет марки появляться без помех с отступом текста.

Ответ 4

Попробовав первый ответ здесь, у меня возникли проблемы с перераспределением элементов списка во второй строке, а не с выравниванием. Используя column-gap, я смог переместить второй столбец и увидеть пули.

Источник: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/

    <!– CSS CODE –>
    .two-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
}

Ответ 5

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

ul {
  column-count:2;
}

ul.solution {
  margin-left:-0.6em;
  margin-right:0.6em;
}

ul.solution > * {
  margin-left:0.6em;
  margin-right:-0.6em;
}
Experimental Group
<ul class="solution">
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>
Control Group
<ul>
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>