您的位置：首页 > Web前端 > HTML5

h5学习笔记：ul 边框引起导航偏移

2016-04-25 23:39 756 查看

今天在编写一个导航进行学习的时候，发现了一个疑惑问题。编写的导航菜单，为何菜单一直偏移，不能重合起来。然后找了老半天，发现ul的外边距引起的问题。下面看看是发生什么回事?默认情况下，单独使用nav标签，内包ul 标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<style type="text/css">

#nav{
width: 100%;
height: 80px;
background-color: #EEEDED;
}

ul{
list-style: none;
}
#nav ul li{
float: left;
width: 120px;
text-align: center;
height: 80px;
line-height: 80px;
}

#nav ul{
width: 500px;
height: 80px;
}

</style>
<body>

<nav id="nav">
<ul>
<li>首页</li>
<li>产品</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>

</body>
</html>

当编写完后，导航条的颜色出现了很大的空隙，为什么？然后慢慢地一直没有引起注意的是ul的一个外边距引起的一些额外的问题。

借助了一些辅助工具，可以看到ul 和nav没有重合在一起。使用了工具发现了

ul marigin ：16px 0 0 16px；

很明显地发现这个问题是外边框引起。

然后再改动一下，添加 body ，ul 外边框和内边框为0，这样子问题就得到解决了。

body ,ul{
margin: 0;
padding: 0;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<style type="text/css">

#nav{
width: 100%;
height: 80px;
background-color: #EEEDED;
}

ul{
list-style: none;
}
a{
text-decoration: none;
}
#nav ul li{
float: left;
width: 120px;
text-align: center;
height: 80px;
line-height: 80px;

}

#nav ul li a
{
display: block;
color: #000;
}

#nav ul li a:hover
{
background-color: #FF0000;
}

#nav ul{
width: 500px;
height: 80px;
}

body ,ul{
margin: 0;
padding: 0;
}
</style>
<body>

<nav id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>

</body>
</html>

再看看效果图如下。

当中还有一些比较深刻的。一般而言居中就是text-align: center;

margin 0 auto;(需要设置固定宽度) 。垂直居中的办法是对li的值变成height 和 line-height 相同方可以实现垂直高中的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航