如何在同一行和同一高度上制作导航栏元素？答案

【问题标题】：How do I make the navbar elements on the same line and on the same height?如何在同一行和同一高度上制作导航栏元素？
【发布时间】：2022-10-01 14:50:54
【问题描述】：

我在引导程序的帮助下为我的页面创建了一个导航栏。我使用了<li> 标签，但我不确定为什么这些项目不在同一行。请查看以下代码：

  <nav class=\"navbar navbar-expand-lg\">
        <ul class=\"navbar-nav mr-auto\">
            <li class=\"nav-item\">
                <a class=\"nav-link\" href=\"#\">HOME</a>
            </li>
            <li class=\"nav-item\">
                <i class=\"fa-solid fa-chevron-right\"></i>
            </li>
            <li class=\"nav-item\">
                <a class=\"nav-link\" href=\"#\">CATEGORY   </a>
            </li>  
        </ul>
    </nav>

这是我的输出的屏幕截图：

你能分享一下截图吗？
@AjayBijlani 抱歉，刚刚编辑了帖子。

标签： html css frontend bootstrap-5

【解决方案1】：

使用弹性盒子。

例如，您必须制作具有徽标、链接、菜单图标的导航栏

所以，

<nav class="d-flex justify-content-between align-items-center">
  <div> logo </div>
  <div> 
   <ul class="d-flex justify-content-between align-items-center">
     <li>link1</li>
     <li>link1</li>
     <li>link1</li>
   </ul>
  </div>
</nav>

如需进一步澄清，请访问：https://getbootstrap.com/docs/4.0/utilities/flex/

【讨论】：

无论您拥有什么元素，这些元素都会在中心垂直对齐，并在两侧水平对齐。
谢谢你！那行得通
欢迎。您检查此答案以关闭或获得有关此的更多答案。