-2

這是我的代碼：如何製作水平導航欄？

nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
nav ul li a { 
 
    clear float: right; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>1st Website</title> 
 
    <head<body<link type="text/css" rel="stylesheet" href="ess.css" media="screen"> 
 
    <div> <a href="#main">Skip to main content</a> </div> 
 
    <h1>Jeremiah Njuguna Web Portfolio</h1> 
 
    <div> 
 
     <nav> 
 
     <ul> 
 
      <li> <a href="Index1.html">Home</a> <a href="Education.html">Education</a> <a href="Family.html">Family</a> <a href="Hobbies.html">Hobbies</a> <a href="Likes.html">Likes</a> <a href="Dislikes.html">Dislikes</a> </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </body> 
 

 
</html>

但它不會出現水平，而不是它顯示了垂直。

來源

2017-04-24 J.Njuguna

你有任何的html代碼？ – Cam

<！DOCTYPE HTML> 1日網站<頭<正文<鏈接類型= 「文/ CSS」相對= 「樣式的」 href = 「ess.css」媒體= 「屏幕」>

耶利米恩朱古納網絡營銷組合

–

編輯問題以包含代碼。閱讀http://www.stackoverflow.com/help/how-to-ask – sasquatch

li是塊元素;所以使它內聯塊，並給它一個寬度，然後它可以浮動。

nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;} 
 
nav ul li a {clear float: right;} 
 
nav ul li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;} 
 
nav ul li {display: inline-block;width: 100px;}

<!doctype html> 
 
<html> 
 
<head><title></title> 
 
</head><body> 
 

 
<nav> 
 
<ul> 
 
<li><a href="">elm1</a></li> 
 
<li><a href="">elm1</a></li> 
 

 

 
</ul> 
 
</nav> 
 

 
</body> 
 
</html>

來源

2017-04-24 14:51:15 vv01f

大多數用戶代理申請display: list-item到li元素。你必須重寫它在你的CSS。要使其內聯嘗試顯示內聯塊或內聯，或者嘗試顯示左側浮動的塊。

來源

2017-04-24 14:54:31 user31782

您還可以使用display:flex：

nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; display:flex} 
nav ul li a {} 
nav ul li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}

來源

2017-04-24 14:56:39

如何製作水平導航欄？

耶利米恩朱古納網絡營銷組合

回答

相關問題