HTML如何内联导航栏中的图标

Question

我现在拥有的是：

<div className="navbar">
  <div className="navbar-content px-5">
    <span>
      <ArrowCircleLeftIcon
      className="h-6 w-6 cursor-pointer dark:stroke-white"
      onClick={() => setIsInfoModalOpen(true)}
    />
    <InformationCircleIcon
      className="h-6 w-6 mr-2 cursor-pointer dark:stroke-white"
      onClick={() => setIsInfoModalOpen(true)}
    />
    </span>
  
    <p className="text-xl ml-2.5 font-bold dark:text-white">{GAME_TITLE}</p>
    <div className="right-icons">
      <ChartBarIcon
        className="h-6 w-6 mr-3 cursor-pointer dark:stroke-white"
        onClick={() => setIsStatsModalOpen(true)}
      />
      <CogIcon
        className="h-6 w-6 cursor-pointer dark:stroke-white"
        onClick={() => setIsSettingsModalOpen(true)}
      />
    </div>
  </div>
  <hr></hr>
</div>

这表明：

​

我希望两个图标在左手边是相邻的，而不是在对方的顶部。我该怎么做呢？

Answer 1

创建一个带有display:inline的类；并将其添加到图标中，一旦预览，如果需要调整某些东西，甚至是行高，就可以使用添加填充/页边距的方法；但显示:内联；是告诉元素不要并排或靠上，而是彼此相邻。确保您测试移动视图和更大的显示。

Answer 2

只需加上：

    .left-icons {
  display: flex;
}