javascript - 如何在 react js中换行后使文本对齐

Question

我无法让文本在换行后对齐。我试过使用 css(文本的底部边距等)。

边距底部不起作用。也尝试更改行高但无济于事。

<Col md={6}>
  <ul className="deets">
    <li><FaRegHandshake classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Let us help you  {this.state.personalized}</span></li>
    <li><FaPhone classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative contacts you within 24 hours</span></li>
    <li><FaToolbox classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
    <li><FaUserSecret classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality with all of our clients by signing NDA</span></li>
  </ul>
</Col>

This is an image of my current problem

问题是对于每个 <li>元素，当文本换行时，第二行的文本与其上方的图像水平对齐，并且不缩进以与其上方的文本水平对齐，这是相同的 <li> 的一部分。 .

Answer 1

尝试:

li {
  display: flex;
  flex-direction: row;
}

你或许可以删除内联样式