ol li 展示問題 css html

css html css html

nick12345 2022-02-11 15:05:37 ‧ 1142 瀏覽

分享至

圖片是目前的效果

<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

有方法做到現在的效果嗎(最前的數字靠左排)??如果真的要做到這樣的效果，是不是一定要直接打數字，不用ol li

1. text
2. text
3. text
4. text
5. text
6. text
7. text
8. text
9. text
10.text
11.text
12.text
13.text
14.text

窮嘶發發發 iT邦高手 1 級 ‧ 2022-02-11 15:38:56 檢舉

ol{ padding-left:0; list-style-position:inside; }

nick12345 iT邦新手 4 級 ‧ 2022-02-11 16:56:36 檢舉

有達到一半效果，但1-9可以有一個空格嗎??想1-9和10以上的TEXT 對齊

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Wilion

iT邦新手 3 級 ‧ 2022-02-11 21:50:52

最佳解答

<head>
   <style>
        ol {
            list-style: none;
            counter-reset: li
        }
        li::before {
            content: counter(li);
            display: inline-block;
            width: 2em;
        }
        li {
            counter-increment: li
        }
    </style>
</head>
    <body>
        <ol>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ol>
    </body>

供參考...