包含锚点时无法将文本与无序列表自定义项目符号对齐答案

【问题标题】：Can't align text to unordered list custom bullet when it included an anchor包含锚点时无法将文本与无序列表自定义项目符号对齐
【发布时间】：2019-02-07 15:31:30
【问题描述】：

我正在尝试创建一个具有已定义项目符号颜色的无序列表，当包含锚点时，该列表将像传统项目符号列表一样对齐。我使用以下代码创建了一个正确对齐的无序列表：

ul li.purchase::before {
  list-style: none;
  content: "\2022";
  color: yellow;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
  padding: 0px;
}

<ul>
  <li class="purchase">Originals</li>
  <li class="purchase">Prints</li>
  <li class="purchase">Apparel</li>
  <li class="purchase">Other Merchandize</li>
</ul>

该代码运行良好，但是当我在 HTML 代码中添加锚点时：

ul li.purchase::before {
  list-style: none;
  content: "\2022";
  color: yellow;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
  padding: 0px;
}

<ul>
  <li class="purchase"><a href="#">Originals</a></li>
  <li class="purchase"><a href="#">Prints</a></li>
  <li class="purchase"><a href="#">Apparel</a></li>
  <li class="purchase"><a href="#">Other Merchandize</a></li>
</ul>

文本向下移动，不再与项目符号对齐。我认为问题出在创建块的锚点上，但我无法通过向锚点添加类选择器并将显示更改为内联块来解决问题。我仍在学习编码，希望您能帮助我解决问题。

【问题讨论】：

锚标签（<a>）默认是内联的，所以我唯一能想到的就是你的重置影响了锚标签的显示。我有一个问题是你在什么浏览器中测试这个？我在 Codepen 中尝试过，似乎没有其他样式可以正常工作：codepen.io/codingmatty/pen/LqOQJg
请将完整的html / css添加到问题中，给定的代码不会重现问题
我已经为您的代码创建了一个代码 sn-p。请告诉我们这 2 个 sn-ps 有什么问题。谢谢

标签： html css alignment html-lists vertical-alignment

【解决方案1】：

通过将“vertical-align”属性赋予 li 中的锚标记，可以轻松解决此问题。垂直对齐有多个值。您可以在浏览器的检查器中尝试任何适合您的值。例如：“垂直对齐：中间；”。

【讨论】：