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伪元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

列表项目项目符号重叠

2 个答案: