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>

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

Answer 1

通过为li中的anchor标签赋予“ vertical-align”属性，可以轻松解决此问题。垂直对齐具有多个值。您可以尝试使用适合您的浏览器检查器。例如：“ vertical-align：middle;”。

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

1 个答案: