-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

如何制作水平导航栏？

耶利米恩朱古纳网络营销组合

回答

相关问题