放置項目符號列表的正確方法<ul>何時可以更改列表大小

Question

嘗試定位我的列表，以便在字體大小發生變化時可以很好地對齊

if list-position-style: 項目符號列表外未對齊

ul{
    
  }
<ul>
<li style="font-size :30px; text-align: justify;">12345 67890 12345 67890</li>
<li style="text-align: justify;">12345</li>
<li style="text-align: justify;">678910</li>
</ul>

if list-position-style: 項目符號列表內部對齊良好，但第二行縮進不好

ul{
    
    list-style-position: inside;
  }

<ul>
    <li style="font-size :30px; text-align: justify;">12345 67890 12345 67890</li>
    <li style="text-align: justify;">12345</li>
    <li style="text-align: justify;">678910</li>
    </ul>

修復它的最佳選擇是什么？

Answer 1

您可以使用自定義列表來執行此操作，請查看下面的代碼段。

我使用 before 偽類創建了一個 li 子彈，這樣您就可以輕松管理相同的設計。

 ul li:first-child { font-size: 18px; } ul { list-style: none; padding: 0; } li { display: flex; align-items: center; } li::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #000; margin-right: 10px; flex: 1; max-width: 10px; min-width: 10px; }

 <ul> <li>1324e32</li> <li>1dsd</li> <li>1asd</li> <li>1das</li> <li>asdaasda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda1asda11</li> </ul>

更新

li 的內容很長，分成 2 行，但未按預期工作，問題已修復。