html - 在列表项中添加一个段落，打破无序列表中的对齐方式

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

试试这个:

.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;
}