48

The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it?

See the example: 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;
}

5 Answers 5

83

I think the bullets are there, but they're being rendered to the left of the viewing area. Try:

list-style-position: inside;
9
  • Yes, this is just because you are using jsFiddle, which doesn't show bullets properly. I wish they'd update their CSS on there. Jun 1, 2012 at 18:43
  • 4
    It actually didn't work in my site code either. The list-style-position worked perfectly though. Thanks for the help.
    – Andrew
    Jun 1, 2012 at 18:55
  • Absolutely Andrew - glad that I could help!
    – rawb
    Jun 2, 2012 at 7:51
  • 4
    That is a good work around but now the 2nd line of text doesn't line up with the first line.
    – BFTrick
    Nov 1, 2012 at 19:36
  • 4
    margin-left:1em makes the bullets appear without messing with the text indentation. Sep 28, 2016 at 8:41
20

Adding both padding-left and a negative text-indent to the list elements seems to produce the desired result:

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

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

Alternatively, add a margin-left to the list element (instead of the list) and use outside bullets:

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

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

1
  • 5
    This (the 2nd solution proposed) is the superior solution IMO because the text alignment remains intact when list items overflow onto multiple lines.
    – Sandwich
    Dec 8, 2014 at 20:38
3

Setting margin-left:1em makes the bullets appear without messing with the text indentation.

2

After trying the first answer here, I was having issues with my list items spilling onto a second row and not lining up. Using column-gap I was able to move the second column over and see the bullets.

Source: 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;
}
1
  • 1
    Just wanted to say that this saved my sanity after hours of investigating the cause of my custom list images (a pdf icon) were disappearing for the second column. Jun 7, 2018 at 10:57
1

Some of the other solutions are pretty good, but all the ones I tried caused various side effects for me. I made some small tweaks and tried to get it as close to perfect as possible.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.