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

由于某些原因，我一直无法制作导航栏。我试着看看这里有没有答案或上网，但没有运气。我错过了什么或有冲突吗？我的导航栏是垂直的，但不会水平移动


 
    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"> 
 
\t \t <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>

来源

2016-07-05 Eugene Triguba

我给你做一个plunker为example。你非常接近。您只需将.nav li选择器上的display属性设置为inline-block即可。

.nav li { 
    display:inline-block; 
}

这张海报实际上是在寻找一个Bootstrap解决方案，但没有标记为这样的问题。这里是一个Bootstrap example。它只使用每个li标签上的pull-left类。

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

来源

2016-07-05 21:55:33

我正在使用引导程序，它可以工作，但我必须删除CDN链接来禁用引导程序。你有任何想法，为什么它不起作用？ –

要使用引导程序获得相同的结果，请将'pull-left'类添加到菜单中的每个'li'标记。我在这里使用bootstrap方法做了一个更新的示例：https://plnkr.co/edit/uS3b0Jqo1VgLAFDzdPL5?p=preview将来如果您正在寻找引导程序的答案，请记住标记bootstrap。 –

在你的CSS，尝试添加

.nav li { 
display: inline; 
}

贵丽元素自然地，嵌段显示，所以这应该继续前进，从它们之间除去休息。

来源

2016-07-05 21:58:06 Megan

查看下面的固定代码片段。您需要将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"> 
 
\t \t <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>

来源

2016-07-05 21:58:28 byteSlayer

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

.nav li{ 
    display: inline; 
}

来源

2016-07-05 21:58:33 n3a9

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

回答

相关问题