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



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>





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

最佳答案

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

关于html - 包含 anchor 时无法将文本与无序列表自定义元素符号对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54565977/

10-11 23:30
查看更多