Bullets Disappear with CSS3 Columns

Bullets disappear with CSS3 columns

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

list-style-position: inside;

CSS columns make my LI bullets disappear

Adding both padding-left and a negative text-indent to the list elements, while making the list itself list-style: inside disc, seems to solve the problem:

.two-column-list {
    padding: 0 0.4em;
    list-style: inside disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
.two-column-list li {
    padding-left: 1em;
    text-indent: -1em;
}

http://jsfiddle.net/mblase75/s9FVT/6/

List lost its bullets

Try this:

list-style-position: inside;

fiddle

Why does giving list items display: inline-block make the bullets go away, and can I get around this?

These bullets appear only with display: list-item (default value for <li>). display-list property from this CSS3 draft will allow you to generate bullets for inline-blocks but it doesn't work yet in any browsers; so you should use ::before pseudo-element or Chris Herbert's solution with column-count.

CSS li bullet does not show when li is inline-block

It's not the nicest way of doing it for sure. But I do recall this not really having any other conclusive outcome..

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

EDIT: I understand the answer is already posted, but one uses absolute positioning and is less effective overall in my opinion and the other is over complicated also, not sure why relevant positioning is required on it? Plus the spacing is already sorted for you via this way. And it's only 2 attributes, simpler.

Why does the list style disappear when display: block is added to a list item in a list ( ul or ol )?

That's because normally, display is set to list-item for <li> elements. See the W3C CSS3 specification: http://www.w3.org/TR/css3-lists/#declaring-a-list-item.

To declare a list item, the ‘display’ property should be set to ‘list-item’.

Note that you can give arbitrary HTML elements the same behaviour; set display: list-item on a <div> for example.

Is there a way to break a list into columns?

The CSS solution is: http://www.w3.org/TR/css3-multicol/

The browser support is exactly what you'd expect..

It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

See: http://jsfiddle.net/pdExf/

If IE support is required, you'll have to use JavaScript, for example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

See: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

You could apply that fallback with Modernizr if you're already using it.

---

Related Topics