html - 如何制作水平导航栏？

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)。