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

【问题标题】：How to move the dot of the listing upper a little in CSS?如何在 CSS 中将列表的点向上移动一点？
【发布时间】：2021-08-03 16:33:08
【问题描述】：

下面是我的列表的 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，它把点放在列表的内部或外部，这个Adjust list style image position? 用于自定义图像。

我尝试调整 padding-bottom，但不起作用。我尝试更改margin-bottom，但似乎它会更改点和文本的位置，这是不可取的。

【问题讨论】：

你需要使用自定义方法来做到这一点
你展示的 css sn-p 与你想要的输出有什么关系？此处显示的 css 删除了列表图像/项目符号。 HTML 在哪里，其他 CSS 在哪里？
@ProfessorAbronsius，很抱歉造成混乱。我已经更新了当前版本的 CSS 代码。

标签： html css

【解决方案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>

【讨论】：

非常感谢。只需使用您的代码即可。

【解决方案2】：

ul{
  list-style: none;
  position: relative;
  padding: 0px;
  margin-left: 28px;
}
ul li{
  margin: 20px 0px 0px;
  position: relative;
  padding-left: 12px;
}
ul li:before{
  content: '.';
  font-size: 40px;
  line-height: 40px;
  top: -24px;
  position: absolute;
  display: block;
  left: 0px;
}

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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>Illum animi in voluptatem aliquam doloribus minus! Quaerat!</li>
</ul>

【讨论】：