<li>，子弹列表目前没有排队

Question

在我的网站上，我有一个包含链接的项目符号列表。

问题是当链接有点长时，它会分成两行。没关系！

但是，当它分为两行时，第二行不在另一行之下。

如何将第二行向右移动以使其适合其他链接？

<div class="test"> 
  <ul>
    <li><a href="menuItem.html">Yes</a></li>
    <li><a href="menuItem.html">Yes Yes Yes Yes</a></li>
    <li><a href="menuItem.html">Yes</a></li>
  </ul>
</div>

这是我正在描述的图像

Answer 1

我猜测您的list-style-position设置为inside。

您应该将其设置为outside（如果您想保留左侧偏移，则使用margin-left属性。）

See jsFiddle here

Answer 2

您可以使用表格布局：

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

来源：How to keep indent for second line in ordered lists via CSS?