<li> ，项目符号列表当前未排队

Question

On my website I have a bullet list with links.

The problem is when a link is a little long, it's split into two lines. It's fine!

However, when it divides in two lines, the second line is not located below the other.

How can I move the second line to the right so it fit with the other links?

<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>

Here is an image of what I'm describing

Answer 1

I'm guessing your list-style-position is set to inside .

You should set it to outside (and play with the margin-left attribute if you want to keep the left offset).

See jsFiddle here

Answer 2

You could use the table layout:

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;
}

source: How to keep indent for second line in ordered lists via CSS?