html - 列表项元素符号重叠

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属性(property)。

此属性允许您控制标记是在框外还是在框内。

初始值在外面。

来自规范:

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>