Как привести текст в соответствие после разрыва строки в реагировать 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

Это может дать вам представление:

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 2

Использование 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>

Answer 3

попробовать:

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

Вы, вероятно, можете удалить встроенный стиль