我的导航栏是垂直的，但不会横向移动

Question

由于某种原因，我一直无法制作导航栏。我试过看这里有什么东西可以回答它或者上网但没有运气。我错过了什么或者是否存在冲突？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我让你成为example的傻瓜。你非常接近。您只需将display选择器上的.nav li属性设置为inline-block。

.nav li {
  display:inline-block;
}

海报实际上是在寻找一个Bootstrap解决方案，但没有标记这样的问题。这是一个Bootstrap example。它只是在每个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>

Answer 2

在CSS中，尝试添加

myCart = shoppingCart()

milk = cartItem(amount=10)
milk.is_beverage = True

coke = cartItem(amount=2)
milk.is_beverage = True

myCart.cart_items = [milk, coke]

chips = CartItem(amount=20)
chips.is_beverage = False

myCart.append_cart_item(chips)

你的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;
}