用css写出横向导航栏

来源：互联网发布：mac系统怎么更新不了编辑：程序博客网时间：2024/05/17 07:06

<p>有以下几种方法：</p><p>1.  ul  +   li</p>

<!DOCTYPE html><html><head>    <meta charset="gb2312">    <title>横向导航栏</title>    <style type="text/css">    *{margin:0;padding:0;}    ul{    border:1px solid black;       padding-left:20px;    }ul li{background-color:yellow;width:200px;text-align:center;list-style-type: none;display:inline-block;border:1px solid red;}    </style> </head><body><ul><li>第一个列表</li><li>第二个列表</li><li>第三个列表</li></ul></body></html>

这里会出现li之间有间隙的问题，此时我们可以使用第二种方法

2. li + float

<!DOCTYPE html><html><head>    <meta charset="gb2312">    <title>li间隙问题</title>    <style type="text/css">    *{margin:0;padding:0;}    ul{    border:1px solid black;       padding-left:20px;    }ul li{background-color:yellow;width:200px;text-align:center;list-style-type: none;float:left;border:1px solid red;}    </style> </head><body><ul><li>第一个列表</li><li>第二个列表</li><li>第三个列表</li></ul></body></html>

完美解决

3. 纯div + float

<!DOCTYPE html><html><head>    <meta charset="gb2312">    <title>li间隙问题</title>    <style type="text/css">    *{margin:0;padding:0;}#container{border:1px solid black;       padding-left:20px;}.div1{float:left;}    </style> </head><body><div id="container"><div class="div1">第一个列表</div><div class="div1">第二个列表</div><div class="div1">第三个列表</div></div></body></html>

4. 表格方式，这个就不写了。用了css之后就尽量不要用table惊醒排版了，费时费力费代码，效果还不一定好~

0 0