如何将元素定位在相关元素旁边

Question

我的导航栏在标记上看起来像这样

我希望我的销售文本与其他菜单项对齐，而图标可以不同大小

有什么技巧可以达到预期的效果吗？我试过使用 position 和 float 属性但没有运气

Answer 1

您可以通过在图标周围的 div 容器中添加

max-width

和

max-height

来实现此目的。像这样的东西：

<h6>
  <div style="height: 64px; width: 64px; max-height: 64px; max-width: 64px">
    <FontAwesomeIcon className="{styles.icon}" icon="{icon}" />
  </div>
  <span className="{styles.text}">{text}</span>
</h6>