Css 试图使div与<；李>；使用flexbox

我试图在一些文本旁边安排一个图像。我可以用字体很棒的图标和文本来实现这一点，但两个图像我无法获得图标，所以我使用图像。我似乎无法把它们并排放在一起。我错过了什么？代码如下：

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

---

我尝试了很多不同的东西，只是把它们都带回到了看起来最好的地方。任何帮助都将不胜感激。谢谢

div不是ul的有效子级（只有li可以是ul的子级）。您需要将内容放入一个li中，并使用li上的display:flex将其隔开。display:flex样式仅应用于它应用于的元素的直接子元素，flex属性应用于容器元素。在您的情况下，li因此将您的div移动到li

中，我认为问题在于第二个

元素关闭太早。包含

的

位于关闭

标记之后，因此适用于

和

的样式规则将不适用于它。在

标记中移动该

是否解决了问题

我能修好它。谢谢大家的帮助！太好了-很高兴听到！

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