如何使内容 li 标签在第一个文本中对齐

Question

我的 li 标签有问题。我希望我的内容保持一致。

 <ul>       
       <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
       <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
 </ul>

    ul, li {
        list-style:none;
    }
    ul li {
        margin-top: 10px; 
        font-size: 16px; 
        font-weight: 500; 
    }
    ul li:first-child {
        margin-top: 20px;
    }
    ul li:before {
        content:"B58"; 
        font-size: 14px; 
        margin-right: 10px; 
        color: #951D34; 
        font-weight: bolder;
    }

Answer 1

只需在li

中添加一个display: flex

ul li {
  display: flex; // <--- HERE ---<
  margin-top: 10px; 
  font-size: 16px; 
  font-weight: 500;
}

Answer 2

请尝试以下代码：

 li {
       padding-left: 35px;
       margin-bottom: 10px;
       font-size: 22px;
       color: #000;
       line-height: 150%;
       position: relative;}
.banner_checklist li:before {
      content:"B58"; 
      font-size: 14px; 
      color: #f7941d;
      margin-right: 10px;
      position: absolute;
      left: 0;
      top: 0;}

示例：

如何使内容 li 标签在第一个文本中对齐

How to make the content li tag align in first text

css

listitem