Question

我在显示大型订单列表时遇到问题。在这里我只写了1000，但想象一下如何寻找100000个元素。

无论如何也许这对大而言不会是一个问题，但是在9999之后，10000中的1会被隐藏。

    1. Element 1
    2. Element 1
   10. Element 10
  100. Element 100
 1000. Element 1000

为了避免这种情况，我希望将其显示为：

  1. Element 1
  2. Element 1
  10. Element 10
  100. Element 100
  1000. Element 1000

我尝试将float:right放在li和ol li上，但没有帮助。是否有任何css技巧可以帮助解决这个问题？

.list ol li {
        margin-left:55px;

}

//margin-left:55px to avoid hidding first digit. Ugly method, I know.

.list ol li {
        float:right;
                position:relative;   
}

.list是包含此ordoned列表的类。

Answer 1

ul{border:1px solid red;padding:0;margin:0;list-style:decimal inside;position:relative;}

   <ul>
      <li>Element 1</li>
     <li>Element 2</li>
     <li>Element 3</li>
    </ul>

Answer 2

使用此选项左对齐有序列表 -

HTML：

<ol>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
        <li>Element 8</li>
        <li>Element 9</li>
        <li>Element 10</li>
        <li>Element 11</li>
    </ol>

CSS：

ol{ list-style-position: inside;}

干杯!!!

Answer 3

Demo

您可以将list-style用作

ol {
    list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

您需要list-style-position : inside，如下所示

ol {
    list-style:decimal inside none;
}

Read here for more details

格式化无序列表浮动左

3 个答案: