使用html和css制作水平导航栏nav
大家好，又见面了，我是你们的朋友全栈君。
使用html和css制作水平导航栏nav的方法及其效果： 1、li设置float:left; （1）代码片段：
...
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
text-align:center;
font-size:14px;
}
li{
float:left;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整体变为可点击区域，而不只是字*/
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
...（2）呈现效果：
（3）备注： ①可对ul设置margin，但是设置为margin:100px auto时无法让ul居中 ②ul所占高度为0。 ③可对li设置width，自由调节宽度。 ④可对li设置margin，使li之间有空白。 ⑤可对a设置display:block；使整体变成可点击区域。 ⑥如果想让链接有相同的大小，就必须用浮动，不能用display:inline;
2、li设置display:inline-block; （1）代码片段：
...
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px;
text-align:center;
font-size:14px;
}
li{
display:inline-block;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
...（2）呈现效果：
（3）备注： ①对ul设置margin:100px auto；可让ul左右居中。 ②即使li没有margin，各个li之间还是会有空白。 （aSuncat-20190809：可对父元素font-size设置0，子元素font-size设置成正常的，来消除空白） ③可对a设置display:block;使整体变成可点击区域。
3、li设置display:inline; （1）代码片段：
...
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px;/*margin:100px auto;可让ul左右居中*/
text-align:center;
font-size:50px;
}
li{
display:inline;/*改动的地方*/
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
...（2）呈现效果：
（3）备注： ①可对ul设置margin：100px auto，可使ul左右居中。 ②即使li没有margin，各个li之间还是会有空白。 ③不能对li设置width，即无法限定宽度。 ④不能对a设置display:block;a会溢出，达不到我们想到的效果。 呈现效果如下：
4、li设置position:absolute; （1）代码片段：
...
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px 50px;
text-align:center;
font-size:14px;
position:relative;
}
li{
position:absolute;/*改动的地方*/
top:0;
width:80px;
padding:10px;
background-color:#ff9137;
}
.li1{
left:0;
}
.li2{
left:80px;
}
.li3{
left:160px;
}
.li4{
left:240px;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整体变为可点击区域，而不只是字*/
}
</style>
</head>
<body>
<ul>
<li class="li1"><a href="#">Home</a></li>
<li class="li2"><a href="#">News</a></li>
<li class="li3"><a href="#">Contact</a></li>
<li class="li4"><a href="#">About</a></li>
</ul>
</body>
...（2）呈现效果：
（3）备注： ①对ul设置position:relative，便于对li设置position; ②对li设置position:absolute; top:0; ③对不同li设置left ;这样可以让li在不同的位置显示出来，而不是全部堆叠在一起。 ④最不推荐这种方法，得给每个li一个left，比较麻烦。
总结：个人比较喜欢用float:left;①各个li的宽度以及li之间的距离都可以自己设置，灵活性更高。②可对a设置display:block;使整体变成可点击区域，而不只是字可以点击。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141011.html原文链接：https://javaforall.cn