当列表大小可以更改时，在 <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

您可以使用自定义列表来执行此操作，请查看下面的 sn-p。

我使用 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 行，无法按预期工作，问题已修复。