在列表项中添加一个段落，在无序列表中打破对齐

Question

我正试图制作一个像这样的无序列表

但是只要输入list-item下的内容部分，第三个list-item就会向上移动并最终看起来像这样

HTML：

<div class="wrapper">
  <ul>
    <li> | </li>
    <li> .01 </li>
    <li class="text">
      <label> First</label>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita qui ipsa dolor. 
      </p>
    </li>
  </ul>
</div>

CSS：

.wrapper{
  text-align: center;
  padding: 60px 0; 
}
.wrapper ul{
  list-style: none;
  padding: 50px;
}
.wrapper ul li{
  display: inline-block;
  padding-left: 30px;
}
.wrapper ul .text{
  text-align: left;
}

你能让我知道如何解决它，还是有什么我做错了？ 在此先感谢!!

Answer 1

试试这个：

＆＃13;

＆＃13;

.wrapper{
  text-align: center;
  padding: 60px 0; 
}
.wrapper ul{
  list-style: none;
  padding: 50px;
  display: flex;      /* add this line */
}
.wrapper ul li{
  padding-left: 30px;
}
.wrapper ul .text{
  text-align: left;
}

＆＃13;

＆＃13;

＆＃13;