Попытка получить div на той же строке с <li>, используя flexbox

Question

Я пытаюсь расположить изображение рядом с текстом. Я смог выполнить sh это с помощью потрясающих значков шрифта и текста, но для двух изображений мне не удалось получить значок, поэтому я использую изображения. Я не могу получить их рядом. Что мне не хватает? Вот код:

<ul className='lower-nav-ul'>
   <li className='lower-nav__link'>
     <FontAwesomeIcon
       icon={'question-circle'}
       className='question-circle'
     />
     Help
    </li>
    <li className='lower-nav__link'>
      <FontAwesomeIcon
        icon={'map-marker-alt'}
        className='map-marker-alt'
      />
      Where to Buy/Rent
     </li>
     <div>
      <img src={require('../images/safety-icon-light.png')} alt='safety-icon'className='safety-icon'/>
     </div>
     <li className='lower-nav__link-with-img'>Safety</li>
     <div>
       <img src={require('../images/en-flag-light.png')} alt='en-flag' className='en-flag'/>
     </div>
     <li className='lower-nav__link'>EN</li>
 </ul>

И мой CSS:

.lower-nav__link {
  margin-bottom: 15px;
}

.lower-nav-ul {
  margin-top: 0px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-left: 15px;
  padding-top: 15px;
}

Я пробовал так много разных вещей и просто взял все обратно туда, где это выглядит лучше всего. Любая помощь будет оценена. Спасибо!

Answer 1

div не является действительным дочерним элементом ul (только li могут быть дочерними элементами ul). Вам нужно поместить свой контент в li и использовать display: flex для li, чтобы разместить их. Отображение: гибкий стиль применяется только к непосредственным дочерним элементам элемента, к которому он применяется

Answer 2

Я считаю, что проблема в том, что второй элемент <li> закрывается слишком рано. <div>, содержащий <img>, находится после закрывающего тега </li>, поэтому правила стиля, которые применяются как к <ul>, так и к <li>, к нему не применяются. Помогает ли перемещение этого <div> внутри тегов <li> решить проблему?

Answer 3

Применение свойства Flex к элементу контейнера. В вашем случае li , поэтому переместите ваш div в li .