我的导航栏是垂直的，但不会水平

Question

出于某种原因，我在制作导航栏时遇到了问题。我试过看看这里是否有任何答案或上网，但没有运气。我错过了什么或者有冲突吗？

 
    html, body {
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    
    .jumbotron {
      background: url(../img/bg.jpg) no-repeat center center;
      background-size: cover;
      height: 800px;
    }
    
    .header {
      background-color: #333;
    }
    
    .nav {
      list-style-type: none;
      margin: 0;
      padding: 20px 0;
    }
    
    .nav li a {
      color: #fff;
      display: inline;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      margin-right: 25px;
      text-transform: uppercase;
    }

    <div class="header">
      <div class="container">
        <ul class="nav" role="navigation">
    <li><a href="#">About</a></li>
          <li><a href="#">Photography</a></li>
          <li><a href="#">Programming</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Reading</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

Answer 1

我让你成为了一个 example 的笨蛋。你们非常亲密。您只需将 .nav li 选择器上的 display 属性设置为 inline-block.

.nav li {
  display:inline-block;
}

发布者实际上是在寻找 Bootstrap 解决方案，但没有将问题标记为这样。这里有一个Bootstrapexample。它只是在每个 li 标签上使用 pull-left class。

<ul class="nav" role="navigation">
    <li class="pull-left"><a href="#">About</a></li>
    <li class="pull-left"><a href="#">Photography</a></li>
    <li class="pull-left"><a href="#">Programming</a></li>
    <li class="pull-left"><a href="#">Writing</a></li>
    <li class="pull-left"><a href="#">Reading</a></li>
    <li class="pull-left"><a href="#">Contact</a></li>
</ul>

Answer 2

在您的 CSS 中，尝试添加

.nav li {
 display: inline;
}

您的 li 元素自然地块显示，因此应该继续并删除它们之间的中断。

Answer 3

请参阅下面的固定代码片段。您需要将 display: inline; 添加到 li 元素以使其水平排列。

    li {
      display: inline;
    }

    html, body {
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    
    .jumbotron {
      background: url(../img/bg.jpg) no-repeat center center;
      background-size: cover;
      height: 800px;
    }
    
    .header {
      background-color: #333;
    }
    
    .nav {
      list-style-type: none;
      margin: 0;
      padding: 20px 0;
    }
    
    .nav li a {
      color: #fff;
      display: inline;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      margin-right: 25px;
      text-transform: uppercase;
    }

    <div class="header">
      <div class="container">
        <ul class="nav" role="navigation">
    <li><a href="#">About</a></li>
          <li><a href="#">Photography</a></li>
          <li><a href="#">Programming</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Reading</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>

Answer 4

添加带有内联显示的属性 .nav li。

.nav li{
   display: inline;
}

我的导航栏是垂直的，但不会水平

My navigation bar is vertical but won't go horizontal

html

css

navbar

twitter-bootstrap