无法使导航栏水平 HTML/CSS答案

【问题标题】：Can't make Navigation Bar horizontal HTML/CSS无法使导航栏水平 HTML/CSS
【发布时间】：2017-09-25 14:28:59
【问题描述】：

float: left;

和

display: inline;

都无法正常工作。

我做错了什么？如何使这个导航栏水平？

.navbar li {
  margin: 5px;
  padding: 0;
  width: 80px;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand">Simmo Simpson</a>
    </div>
    <ul class="nav navbar-nav">
      <li id="navbar" class="active"><a href="#">Home</a></li>
      <li id="navbar" class="active"><a href="#">About</a></li>
      <li id="navbar" class="active"><a href="#">Portfolio</a></li>
      <li id="navbar" class="active"><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

【问题讨论】：

尝试使用li.navbar { 代替.navbar li {
我不知道这是故意的，但我已将像素单位添加到您的样式中。我还添加了 Bootstrap CDN 和 sn-p。
谢谢亚历克斯！当我在 stackoverflow 中运行您的代码时，它会执行我想要的操作，但是当我在文本编辑器中运行它时，它仍然是垂直的。我的中有 CDN。仍然无法解决我的问题。有人有什么想法吗？

标签： html css twitter-bootstrap-3 navigationbar

【解决方案1】：

将您的 css 放在样式标签或外部 css 文件中，并将其包含在 html 的标题部分中

  <style>
ul li{ display: inline;}
</style>

【讨论】：

【解决方案2】：

试试下面的代码sn-p，可能对你有帮助

.navbar li {
    margin: 5px;
    padding: 0;
    width: 80px;
    float: left;
    list-style-type : none;
}

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand">Simmo Simpson</a>
        </div>
        <ul class="nav navbar-nav">
            <li id="navbar" class="active"><a href="#">Home</a></li>
            <li id="navbar" class="active"><a href="#">About</a>                 </li>
            <li id="navbar" class="active"><a href="#">Portfolio</a>              </li>
            <li id="navbar" class="active"><a href="#">Contact</a>              </li>
        </ul>
    </div>
</nav>

【讨论】：

谢谢@sumit chauhan 我尝试使用 float: left;和列表样式类型：无；在一起，但它仍然没有给我水平布局

【解决方案3】：

<!DOCTYPE html>
<html>
<head>
<style>
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;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

【讨论】：

【解决方案4】：

改变了

.navbar li {

到

li.navbar {

li.navbar {
  margin: 5px;
  padding: 0;
  width: 80px;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand">Simmo Simpson</a>
    </div>
    <ul class="nav navbar-nav">
      <li id="navbar" class="active"><a href="#">Home</a></li>
      <li id="navbar" class="active"><a href="#">About</a></li>
      <li id="navbar" class="active"><a href="#">Portfolio</a></li>
      <li id="navbar" class="active"><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

这是你要找的吗？

【讨论】：

将 .navbar li 更改为 li.navbar 对我不起作用。这两种语法都可以接受吗？是首选吗？谢谢

【解决方案5】：

已解决：

 <li id="navbar" class="active"><a href="#">Home</a></li>

元素需要对应的CSS为

#navbar

不是

.navbar li

.navbar li 应该在 CSS 中用于 html class 属性 class="navbar li" 而 #navbar 应该用于 ID 属性

当我更改它时，CSS 样式将应用于具有相应 id 属性的 html。

【讨论】：

【解决方案6】：

看来你的做法是正确的，但你的代码示例遗漏了一些标签：

<html>
    <head>
    </head>
    <body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand">Simmo Simpson</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="navbar-link" class="active"><a href="#">Home</a></li>
                <li class="navbar-link" class="active"><a href="#">About</a></li>
                <li class="navbar-link" class="active"><a href="#">Portfolio</a></li>
                <li class="navbar-link" class="active"><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <style>
    .navbar li {
        margin: 5;
        padding: 0;
        width: 80;
        float: left;
    }
    </style>
    </body>
</html>

会成功的。您必须对浏览器说，它与这些行有什么关系：使用 Html <html> 并使用 <style> 应用该样式。如果您的样式指令必须更重要，我认为这可能是创建第二个文件的更好方法，该文件将包含您的所有 css 并将其与您的 html 文档链接。

编辑：

css 规则：.navbar li 将找到 navbar 类并找到其所有 li 子项，因此您可以删除每个 li 上的 id 并用类名替换它们

希望对你有帮助

【讨论】：

感谢您的回复@Tony 抱歉，如果我的原始帖子不清楚。我已经在另一个文件中有我的 CSS 并正在使用以防万一，我尝试在 HTML 中使用
您的浏览器似乎找不到 main.css：它在哪里？在您的评论中，它必须与您的 index.html 位于同一位置。另一方面，您是否尝试复制我在帖子中提供的所有代码示例？使用这个会发生什么？
解决了问题并贴在下面。我需要使用#navbar 而不是.navbar li，因为它是一个ID 元素而不是一个类元素。
天啊，我确实看到您使用了具有相同值的多个 id。一个 id 每页只能出现一次。如果你想使用它，你必须使用它（我编辑了我的帖子）