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

来源：互联网发布：近视眼手术检查知乎编辑：程序博客网时间：2024/05/21 09:54

今天在编写一个导航进行学习的时候，发现了一个疑惑问题。编写的导航菜单，为何菜单一直偏移，不能重合起来。然后找了老半天，发现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 相同方可以实现垂直高中的效果。

0 0