更新：

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

更新：

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

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

以前的“非引导”答案：

目标是水平对齐“ li”项，因此一种简单的方法是：

.sidebar-nav li{
  display: inline;
}

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

Answer 3

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

我首选的方法是使用flex。

.sidebar-nav {
  display: flex;
}

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

如何制作水平导航栏？

谢谢您的帮助，但以下三个答案均无效。

3 个答案:

更新：

以前的“非引导”答案：