尝试使用 flexbox 将 div 与 <li> 放在同一行答案

【问题标题】：Trying to get div on same line with <li> using flexbox尝试使用 flexbox 将 div 与 <li> 放在同一行
【发布时间】：2020-02-08 04:45:28
【问题描述】：

我正在尝试在某些文本旁边排列图像。我能够使用字体很棒的图标和文本来完成此操作，但是我无法获得两个图像的图标，所以我正在使用图像。我似乎无法让他们并排。我错过了什么？代码如下：

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

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

【问题讨论】：

标签： css reactjs flexbox

【解决方案1】：

div 不是 ul 的有效子代（只有 li 可以是 ul 的子代）。您需要将内容放入 li 并使用 display: flex 在 li 上分隔它们。 display: flex 样式只适用于它所应用的元素的直接子元素

【讨论】：

【解决方案2】：

Flex 属性应用于容器元素。在你的情况下 li 所以将你的 div 移动到 li 内。

【讨论】：

【解决方案3】：

我认为问题在于第二个 <li> 元素关闭得太早。包含<img> 的<div> 位于结束</li> 标记之后，因此适用于<ul> 和<li> 的样式规则将不适用于它。将<div> 移动到<li> 标签内是否可以解决问题？

【讨论】：

我能够修复它。感谢大家的帮助！
太棒了——很高兴听到！