用css写出横向导航栏

<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惊醒排版了,费时费力费代码,效果还不一定好~


展开阅读全文

没有更多推荐了,返回首页