如何在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>

这是我当前问题的图像

问题是，对于每个<li>元素，当文本换行时，第二行上的文本与它上面的图像水平对齐，而不是缩进以与它上面作为同一<li>的一部分的文本水平对齐。

Answer 1

try:

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

你可能可以删除内联样式

Answer 2

这可能会给你一个想法：

class App extends React.Component {
render() {
return ( 
<ul>
<li><div className='item'><div className='left'>1</div><div className='right'>2</div></div></li>
<li>3</li>
<li>4</li>
</ul>
);
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);

.item {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.right {
align-self: flex-end;
border: 1px solid black;
width: 30%;
}
.left {
align-self: flex-start;
border: 1px solid blue;
width: 30%;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root" />

Answer 3

使用flex应该可以解决您的问题，不要忘记为图像设置固定大小以避免图像拉伸，并将align-items设置为flex-start以使您的图标位于顶部

工作示例：

li {
display: flex;
flex-direction: row;
align-items: flex-start;
}
li img {
width: 30px;
height: 30px;
}

<Col md={6}>
<ul className="deets">
<li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative conzrhtzhtthhtrhtrhtrhtthzrthhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhtaqergergerhgerherhqerherhqerherhqerhqerhqerhqerherhqerheherherhcts you within 24 houerqgerhqerhqretjhqerjqertjqrtjqrtjqrtjrtjrs</span></li>
<li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
<li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality<br/> with all of our clients<br/> by signing<br/> NDA</span></li>
</ul>
</Col>