html - 如何在 CSS 中将列表的点向上移动一点？

Question

下面是我的清单的 CSS 代码：

ul.fancy li, .category-page ul li {
    list-style-type: disc;
    padding-left: 20px;
    position: relative;
}

我想将每个列表项旁边的点稍微向上移动一点，但保持列表项文本位置不变，这样最终的结果是，点和列表项文本在中间垂直对齐，见下图：

如何实施？

我尝试在线搜索，但找到这个https://www.w3schools.com/cssref/pr_list-style-position.asp是把点放在列表里面还是外面，这个调整列表样式图像位置？用于自定义图像。

我尝试调整填充底部，但不起作用。我尝试更改底部边距，但似乎它会更改点和文本的位置，这是不可取的。

标签： htmlcss

Answer 1

我使用 中的伪元素创建了点li，这样您就可以完全控制点，更改其颜色、位置、大小等。

ul {
  list-style: none;
  padding: 0;
}
ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
ul li::before {
  content: '';
  display: inline-block;
  margin-right: 15px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000;
}

 <ul>
    <li>A</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat labore, autem, dolor tempora nulla laboriosam maxime quam quod optio repellendus distinctio hic. Illum animi in voluptatem aliquam doloribus minus! Quaerat!</li>
    <li>C</li>
</ul>