我有一个无序列表，我希望将其列表项显示为两行多列。
问题在于每个列表项的项目符号与前一个列表项重叠。
我该如何阻止这种情况发生？我已经找到了一个调整边距的混乱解决方案，但想知道是否有一个优雅的解决方案？
我想保留子弹。
我不希望列表项中的文本环绕项目符号。
我目前正在这样做：
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/
您可能正在寻找 CSSlist-style-position财产。
此属性允许您控制标记是在框外还是在框内。
初始值为outside.
从规格来看：
12.5
列表
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
