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

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

我以你为例子。你们非常亲密。您只需将选择器display上的属性设置.nav li为inline-block。

.nav li {
  display:inline-block;
}

发帖者实际上是在寻找 Bootstrap 解决方案，但没有将问题标记为此类。这是一个 Bootstrap示例。它只是使用pull-left每个li标签上的类。

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