如何制作水平导航栏？

Question

我想制作一个带有水平导航栏的网站。我找到了一个有用的参考资料，但由于我不是HTML和CSS方面的专家，我无法弄清如何将其应用到我的当前代码中。

我想创建一个类似这样的导航栏:

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }

以下是我当前的代码：

{% block sidebar %}
    <ul class="sidebar-nav">
        <li><a href="{% url 'index' %">Home</a></li>
        <li><a href="">All users</a></li>
        <li><a href="">All productss</a></li>
        <!-- <li><a href="">All vendors</a></li> -->
    </ul>
{% endblock %}

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

感谢您的帮助，但以下三个答案都没有奏效。

在这里，我添加了更多的 .css 代码。我猜想 "col-sm-2" 控制了我的当前代码，但不知道如何调整它以使其成为水平导航栏。

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
        <ul class="sidebar-nav">
          <li><a href="{% url 'index' %">Home</a></li>
          <li><a href="">All users</a></li>
          <li><a href="">All productss</a></li>
          <!-- <li><a href="">All vendors</a></li> -->
        </ul>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
    </div>
'''

- N.Yoon

Answer 1

使用属性float:left可以让列表项水平排列。尝试在CSS代码中添加类似以下内容：

.sidebar-nav li {
    float:left;
}

通过编写 .sidebar-nav li，您可以将样式应用于所有属于 sidebar-nav 的列表项（li）的子元素。

- ToreTang

Answer 2

更新:

现在我们知道您正在使用Bootstrap，只需添加几个类即可创建水平导航栏：

以下代码将为您提供具有美观填充和边距的导航栏： Bootstrap导航栏参考：https://getbootstrap.com/docs/4.3/components/navs/

<div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <!--'col-sm-12' to 'col-12' for 100% width -->
          {% block sidebar %}
          <ul class="sidebar-nav nav">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'index' %">Home</a>
            </li>
            <li class="nav-item"><a class="nav-link" href="">All users</a></li>
            <li class="nav-item">
              <a class="nav-link" href="">All productss</a>
            </li>
            <!-- <li class="nav-item"><a class="nav-link" href="">All vendors</a></li> -->
          </ul>
          {% endblock %}
        </div>
        <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
      </div>
    </div>

之前的“非Bootstrap”答案：

目标是将“li”项水平对齐，一个简单而易行的方法是：

.sidebar-nav li{
  display: inline;
}

显示属性参考： https://www.w3schools.com/cssref/pr_class_display.asp

- alphainfinitus

Answer 3

编辑：我假设您正在使用Bootstrap网格系统。 类col-sm-2表示您的div将在屏幕宽度大于767px的设备上占用总容器宽度的1/6或16.66％。 如果您希望菜单项占用整个屏幕宽度，请将col-sm-2替换为col-sm-12。

我喜欢使用flex来完成这个操作。

.sidebar-nav {
  display: flex;
}

这将确保 ul 内部的所有元素都在单行中显示，并且它们的高度都相同，等于 ul 的高度。希望这可以帮到你。

- Ziyad

---

这也有助于避免使用浮点数，其具有许多副作用，并且如果您对CSS不熟悉，则可能会非常令人困惑。 - Ziyad

这个链接可能对学习Bootstrap网格系统有所帮助： https://mdbootstrap.com/docs/jquery/layout/grid-examples/ - Ziyad