List item bullets overlapping

Question

I have an unordered list who's list items I would like displayed as two rows with multiple columns.

The problem is that the bullet of each list item is overlapping the previous list item.

How do I stop this from happening? I've figured out a messy solution adjusting the margins, but was wondering if there's an elegant fix for this?

I would like to keep the bullets.

I do NOT want text within the list item to wrap around the bullet.

I'm currently doing it like this:

body > ul {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}
body > ul > li {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}
body > ul > li:nth-child(even) {
  background: #23a;
}
body > ul > li:nth-child(odd) {
  background: #49b;
}

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

http://jsfiddle.net/L4L67/55/

Answer 1

You may be looking for the CSS list-style-position property.

This property allows you to control whether the marker is outside the box, or inside.

The initial value is outside.

From the spec:

12.5 Lists

list-style-position

outside

The marker box is outside the principal block box.

inside

The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements.

* { box-sizing: border-box; }          /* NEW */

body > ul {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
}

body > ul > li {
    flex-grow: 1;
    width: 33%;
    height: 100px;
    list-style-position: inside;       /* NEW */
    text-indent: -1em;                 /* NEW */
    padding-left: 1em;                 /* NEW */

}

body > ul > li:nth-child(even) {
    background: aqua;
}

body > ul > li:nth-child(odd) {
    background: lightgreen;
}

<ul>
    <li>text text text text text text text text text text text text text text text text text text text text text text text text text text text text </li>
    <li></li>
    <li>text text text text text text text text text text text text text text</li>
    <li>text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text</li>
    <li></li>
    <li></li>
</ul>