列表项目符号重叠

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 https://developer.mozilla.org/en-US/docs/Web/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>

​