Question

我正在使用Bootstrap。我正在尝试将图像作为数字图标添加到我的列表中。在<div>代码中添加<ul>代码是一种不好的做法，那么是否可以使用::before添加图标？

这是我的代码：

<ul class="lizt" id="sub-lizt">
  <li class="item"><a href="#Item_name">1. Bunch of geebrish</a></li>
  <li class="item"><a href="#Item_name">2. Bunch of geebrish</a></li >
</ul>

Answer 1

ul {
 list-style-image: url('/your_img_path.jpg');
}

您可以在CSS中使用它。如需深入了解，请查看Here.

Answer 2

将div置于li标记内并不是一种不好的做法。将div直接放在列表ol / ul中，但不在列表项中。

话虽这么说，你不需要div将编号的图像作为列表的子弹，因为事实上，list-style属性允许使用图像作为子弹。

.item {
  list-style: url('http://via.placeholder.com/32x32/000/fff?text=1');
}

.item:nth-child(2) {
  list-style: url('http://via.placeholder.com/32x32/000/fff?text=2');
}

.item:nth-child(3) {
  list-style: url('http://via.placeholder.com/32x32/000/fff?text=3');
}

<ol class="lizt" id="sub-lizt">
  <li class="item"><a href="#Item_name">Bunch of geebrish</a></li>
  <li class="item"><a href="#Item_name">Bunch of geebrish</a></li >
  <li class="item"><a href="#Item_name">Bunch of geebrish</a></li >
</ol>

您可能希望图像在文本中间垂直对齐。在这种情况下，您有很多选项，例如将a元素从其相对位置向上移动。

.item a {
  display: inline-block;
  position: relative;
  top: -0.75em;
}

使用:: before添加要列出的图标

2 个答案: