如何将导航与最多 3 个元素（列表）连续居中 [响应式] [重复]答案

【问题标题】：how do I center the nav with 3 elements(lists) max in a row [responsive style] [duplicate]如何将导航与最多 3 个元素（列表）连续居中 [响应式] [重复]
【发布时间】：2020-04-05 02:42:28
【问题描述】：

我尝试了多种方法，但在不移除填充的情况下无法居中这是一个移动导航栏

这就是我的代码现在的样子：[1]:https://i.stack.imgur.com/sHEjj.png

它应该是这样的：[1]：https://i.stack.imgur.com/yNiCz.png

提前致谢！

header nav ul {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

header nav ul li {
  display: inline-block;
  float: left;
  list-style: none;
  padding: 10px 20px;
}

header nav ul li a {
  font-family: Segoe UI;
  color: #777777;
  font-size: 24px;
}

<nav>
    <ul>
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'movies' %}">Movies</a></li>
        <li><a href="{% url 'about' %}">About</a></li>
        {% if user.is_authenticated %}
            <li><a href="{% url 'my_account' %}">My Account</a></li>
        {% else %}
            <li><a href="{% url 'login' %}">Log in</a></li>
            <li><a href="{% url 'signup' %}">Sign up</a></li>
        {% endif %}

    </ul>
</nav>

【问题讨论】：

标签： html css django

【解决方案1】：

您可以使用弹性盒布局来代替display: block。因此，将display: flex 添加到<ul> 元素、justify-content: center 以使其居中并添加flex-wrap: wrap，这样这些项目就不会留在同一行，因为这是默认行为。

header nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  width: fit-content;
}

【讨论】：