列表项子弹重叠

Question

我有一个无序列表谁是我想显示为两行多列列表项。

问题是，每个列表项的子弹重叠前面的列表项。

如何制止这种事情发生？我已经想通了一个混乱的解决方案调整空间，但不知道是否有一个优雅的修为呢？

我想保持子弹。

我不想在列表项目中的文字环绕子弹。

目前，我正在做这样的：

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

你可能会寻找的CSS list-style-position财产。

此属性允许您控制标记是否是外箱，或内部，

初始值是outside。

从规格：

12.5 Lists

list-style-position

outside

标记框是原始块框之外。

inside

标记框被放置在块框第一行内框，元素的内容之前和之前的任何:before伪元素。

* { 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>

Answer 2

body > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #aaa;
  columns:3;
  column-gap:0;
}
body > ul > li {
  list-style: none;
  height: 100px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>