不能对齐文本无序列表定制子弹，当它包含一个锚

Question

我试图创建一个无序列表时，包括锚是对齐像传统的项目符号列表定义子弹的颜色。我已经创建使用下面的代码的正确对准一个无序列表：

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>

文字下移并与子弹不再对齐。我认为问题出在锚创造一个块，但我无法通过添加类选择锚和变更显示到inline-block的解决这个问题。我还在学习代码，希望你能帮我一个解决方案。

Answer 1

这个问题可以很容易地给人以“垂直对齐”属性的定位标记在贵丽来解决。垂直对齐有多个值。你可以尝试在浏览器的inpector取其价值为你的作品。例如：“垂直对齐：中间;”。