Question

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>

Answer 1

您似乎正在以正确的方式做事，但您的代码示例错过了一些标记：

<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会找到导航栏类并查找其所有li子项，因此您可以删除每个li上的ID并将其替换为类名

我希望它可以提供帮助

Answer 2

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

true

Answer 3

尝试使用以下代码段，它可能会对您有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

Answer 5

已更改

.navbar li {

到

li.navbar {

＆＃13;

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

＆＃13;

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

＆＃13;

这是你在找什么？

Answer 6

解决：

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

元素需要相应的CSS

#navbar

而不是

.navbar li

.navbar li应该在CSS中用于html class 属性class =＆＃34; navbar li＆＃34;而#navbar应该使用 ID 属性

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

无法使导航栏水平HTML / CSS

6 个答案: