html - 是否可以在 li 标签中使用不同的列表说明符

Question

我使用 ✈ 作为列表说明符，当它在单行中时它对我的元素来说看起来不错，但对于移动 View (在列表的多行中)它看起来有点难看。你有什么补救措施吗..谢谢

实际 View :

✈ 这是我使用 li 标签的问题
请给我一些补救措施。
✈ 这是我使用 li 标签的问题
请给我一些补救措施。

预期 View :

✈ 这看起来很棒
无论如何都可以做到这一点。
✈ 这看起来很棒
无论如何都可以做到这一点。

Answer 1

有几种不同的方法可以实现这一点。

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