如何对齐菜单在同一行答案

【问题标题】：How to align menu to be on the same line如何对齐菜单在同一行
【发布时间】：2022-01-31 18:05:48
【问题描述】：

如何正确对齐此菜单？我曾尝试对 li 标签使用 inline-block ，但这并没有对齐。

这是目前的代码，请帮忙出主意

            <nav class="navbar navbar-expand-md">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'index' %}">Active Listings</a>
                    </li>
                    <li class="nav-item">
                        <a href="#">Category</a>
                    </li>
                    <li class="nav-item">
                        <a href="#">Sell</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                   <div>
                        {% if user.is_authenticated %}
                            welcome, <strong>{{ user.username }}</strong>.
                        {% else %}
                            Not signed in.
                        {% endif %}
                    
                    </div>
                    
                        {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">Log Out</a>
                        </li>
                        {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'login' %}">Log In</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'register' %}">Register</a>
                        </li>
                        {% endif %}
                </ul>
            </nav>

【问题讨论】：

首先修复损坏的 HTML。 UL 不能包含 DIV 作为子级。
并且保持一致。如果您要使用 class="nav-link" 作为 li 内的锚点，那么对所有锚点都这样做。
当你可以使用<nav class="nav">...</nav>时，没有充分的理由使用ul/li
@CBroe，谢谢，我已经更新了 HTML 并将 div 更改为 li。我不知道你不能在 ul 中有一个 div。谢谢
查看@CBroe 的消息。您不能在 ul 中间注入 div。一个 ul 里面只能有 child li 。正如我所提到的，您根本不需要使用 ul 。只需使用导航标签，并将链接嵌套在导航中。你的树枝逻辑问题会更少。对于您的名字，不要在要显示的文本周围使用 div，而是使用 span。

标签： css bootstrap-4

【解决方案1】：

尝试添加显示弹性并对齐项目中心。这将 100% 解决您的问题

  ul {
  display: flex;
  align-items: center;
 }

【讨论】：

问题是关于 bootstrap4。
bootstrap 样式已经在处理这个问题，所以是的，不，这不是 bootstrap 的处理方式。
这个人的问题是他在一个链接中遗漏了一种样式。并不是说他没有多余地制作一个已经由 bootstrap nav 样式完成的 flexbox 样式。
@KLTR，感谢您的回复。