如何正確修復導航欄？

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <title>Navigation Bar</title> 
 
    <style type="text/css"> 
 
    #navbar>ul>li { 
 
     display: inline-block; 
 
    } 
 
    </style> 
 

 

 
</head> 
 

 
<body> 
 
    <h1>Navigation Bar</h1> 
 
    <div id="navbar"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     <ul> 
 
      <li><a href="#">google</a> 
 
      </li> 
 
      <li><a href="#">facebook</a> 
 
      </li> 
 
      <li><a href="#">linkidin sharma</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     <ul> 
 
      <li><a href="#">google</a> 
 
      </li> 
 
      <li><a href="#">facebook</a> 
 
      </li> 
 
      <li><a href="#">linkidin sharma</a> 
 
      </li> 
 
      <li><a href="#">github</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">About Us</a> 
 
     <ul> 
 
      <li><a href="#">linkidin sharma</a> 
 
      </li> 
 
      <li><a href="#">github</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Career 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">google</a> 
 
     </li> 
 
     <li><a href="#">facebook</a> 
 
     </li> 
 
     <li><a href="#">linkidin sharma</a> 
 
     </li> 
 
     <li><a href="#">github</a> 
 
     </li> 
 
     <li><a href="#">bhagalpur</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

我怎麼做並排列表項側，因爲它們出現上下而不是並排？我將inline-block屬性應用於他們，請別人解釋爲什麼即使發生這種情況？

來源

2015-07-20 vinay

您需要明確您的問題，因爲我無法弄清楚您正在嘗試做什麼。 – DCdaz

不，我只想要非嵌套的列表項是內聯的，就像你可以看到的任何普通網站一樣。 – vinay

也許是這樣http://jsfiddle.net/soledar10/nhwpdj3u/？ – Dmitriy

如果你想要的是使在同一行上項目，增加

vertical-align:top;

的風格。問題在於您的頂級列表項目不是全部相同的高度，並且baseline的默認垂直對齊會導致它們對齊到底部！

#navbar>ul>li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<h1>Navigation Bar</h1> 
 
<div id="navbar"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
     <ul> 
 
     <li><a href="#">google</a> 
 
     </li> 
 
     <li><a href="#">facebook</a> 
 
     </li> 
 
     <li><a href="#">linkidin sharma</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">google</a> 
 
     </li> 
 
     <li><a href="#">facebook</a> 
 
     </li> 
 
     <li><a href="#">linkidin sharma</a> 
 
     </li> 
 
     <li><a href="#">github</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">About Us</a> 
 
     <ul> 
 
     <li><a href="#">linkidin sharma</a> 
 
     </li> 
 
     <li><a href="#">github</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Career</a> 
 
     <ul> 
 
     <li><a href="#">google</a> 
 
     </li> 
 
     <li><a href="#">facebook</a> 
 
     </li> 
 
     <li><a href="#">linkidin sharma</a> 
 
     </li> 
 
     <li><a href="#">github</a> 
 
     </li> 
 
     <li><a href="#">bhagalpur</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2015-07-20 18:48:07

有沒有其他方法可以在不使用垂直對齊屬性的情況下使它們處於相同高度 – vinay

那麼，您可以明確地給它們所有相同的高度。根據最大菜單中的項目數量計算它應該是什麼。但它不會有幫助，它們仍然具有相同的垂直對齊！你爲什麼不想改變它？ –

一個解決方案是使ul'display：table-row'和li'display：table-cell'。儘管如此，我仍然認爲這些事情很糟糕。 –

#navbar>ul>li { 
    display: inline-block; 
    vertical-align: top; 
}

是否所有的配合，依賴於頁面的寬度

來源

2015-07-20 18:48:49

適用於CSS：

ul li { 
    float: right; 
}

或風格各立與使用屬性style =「float：right;」如

<li style="float: right">

來源

2015-07-20 18:51:55

這將導致他們顯示錯誤的方式。（第一個菜單在右邊，最後一個菜單在左邊。） –

所以它會：float：left;然後。也許最好補充餘量：10px inbetween –

也許這是最好的，如果你在發佈之前測試你自己的答案。 –

如何正確修復導航欄？

回答

相關問題