我的導航欄是垂直的，但不會水平移動

由於某些原因，我一直無法制作導航欄。我試着看看這裏有沒有答案或上網，但沒有運氣。我錯過了什麼或有衝突嗎？我的導航欄是垂直的，但不會水平移動


 
    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

我的導航欄是垂直的，但不會水平移動

回答

相關問題