添加列表項中一個段落在無序列表打破aligment

Question

我試圖做一個無序列表這樣

但只要在輸入列表項下的內容的一部分，第三個列表項上移，並最終看起來像這樣

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