我使用 ✈ 作为列表说明符,当它在单行中时它对我的元素来说看起来不错,但对于移动 View (在列表的多行中)它看起来有点难看。你有什么补救措施吗..谢谢
实际 View :
✈ 这是我使用 li 标签的问题
请给我一些补救措施。
✈ 这是我使用 li 标签的问题
请给我一些补救措施。
预期 View :
✈ 这看起来很棒
无论如何都可以做到这一点。
✈ 这看起来很棒
无论如何都可以做到这一点。
最佳答案
有几种不同的方法可以实现这一点。
选项 1.CSS 表格
ul {
list-style-type: none;
display: table;
width: 200px;
padding: 0;
}
li {
display: table-row;
}
li:before {
content: '✈ ';
padding-right: 5px;
display: table-cell;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
选项 2.绝对
和相对
位置
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
position: relative;
margin-left: 25px;
}
li:before {
content: '✈ ';
position: absolute;
left: -20px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
选项 3.Flexbox
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
display: flex;
}
li:before {
content: '✈ ';
margin-right: 5px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
关于html - 是否可以在 li 标签中使用不同的列表说明符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36065543/