我有一个无序列表,其中的列表项我希望显示为两行多列。
问题是每个列表项的元素符号与前一个列表项重叠。
如何阻止这种情况发生?我想出了一个调整边距的困惑解决方案,但想知道是否有一个优雅的解决方案?
我想保留子弹。
我不希望列表项中的文本环绕元素符号。
我目前是这样做的:
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>
最佳答案
您可能正在寻找 CSS list-style-position
属性(property)。
此属性允许您控制标记是在框外还是在框内。
初始值在外面
。
来自规范:
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>
关于html - 列表项元素符号重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37823543/