如何制作水平导航栏？

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>
'''

Answer 1

让列表元素水平堆叠的技巧是在列表项上使用属性float:left。尝试在您的 css 代码中添加类似的内容

.sidebar-nav li {
    float:left;
}

通过编写 .sidebar-nav li，您可以将样式应用于所有作为 sidebar-nav 子项的列表项 (li)。

Answer 2

更新：

现在我们知道您正在使用引导程序，您可以通过添加几个类来制作水平导航栏：

以下代码为您提供了一个具有漂亮填充和边距的导航栏： 引导导航栏参考：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>

之前的“非引导”答案：

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

.sidebar-nav li{
  display: inline;
}

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

Answer 3

编辑：我假设您使用的是引导网格系统。 col-sm-2 类意味着在屏幕宽度大于 767 像素的设备上，您的 div 将占据容器总宽度的 1/6 或 16.66%。 如果您希望菜单项占据整个屏幕宽度，请将col-sm-2 替换为col-sm-12。

我首选的方法是使用flex。

.sidebar-nav {
  display: flex;
}

这将确保ul 内的所有元素都显示在一行中，并且它们都具有相同的高度，即等于ul 的高度。希望这会有所帮助。