Html 在列表项中添加段落打破无序列表中的对齐

我正试着做一个这样的无序列表

但是，一旦输入列表项下的内容部分，第三个列表项就会向上移动，并以如下方式结束

HTML:

你能告诉我怎么修吗？还是我做错了什么？ 提前谢谢

试试这个：

.wrapper{
文本对齐：居中；
填充：60px0；
}
包装纸{
列表样式：无；
填充：50px；
显示：flex；/*添加此行*/
}
李先生{
左侧填充：30px；
}
.ul.text{
文本对齐：左对齐；
}

试试这个：

.wrapper{
文本对齐：居中；
填充：60px0；
}
包装纸{
列表样式：无；
填充：50px；
显示：flex；/*添加此行*/
}
李先生{
左侧填充：30px；
}
.ul.text{
文本对齐：左对齐；
}

谢谢，它很管用。。但是怎么做呢？flex在子元素上工作，并且由于没有为子元素设置属性，如何进行更改？

display:inline block

ist试图将块元素显示为文本。因此，它们在底部对齐。这就是它将元素向上移动的原因

display:flex

只是一种不同的方法，它可以让项目彼此相邻，而无需

内联

。也许

float:left

也可以。尝试过了，但是当我尝试填充列表时，列表项是水平堆叠的，而不是垂直堆叠的，尝试过flex:1没有任何变化。是的，但是

flex:1

只有在父元素上使用

display:flex

时才起作用。谢谢大家，最后一件事，这是正确的方法吗？还是我应该试着用桌子来代替呢？谢谢，它很有效。。但是怎么做呢？flex在子元素上工作，并且由于没有为子元素设置属性，如何进行更改？

display:inline block

ist试图将块元素显示为文本。因此，它们在底部对齐。这就是它将元素向上移动的原因

display:flex

只是一种不同的方法，它可以让项目彼此相邻，而无需

内联

。也许

float:left

也可以。尝试过了，但是当我尝试填充列表时，列表项是水平堆叠的，而不是垂直堆叠的，尝试过flex:1没有任何变化。是的，但是

flex:1

只有在父元素上使用

display:flex

时才起作用。谢谢大家，最后一件事，这是正确的方法吗？或者我应该试着用桌子来代替？

<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>

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