CSS学习（十）——列表与导航-优快云博客

本文链接：https://blog.youkuaiyun.com/codemonkeysama/article/details/51455407

本文介绍如何使用HTML和CSS创建垂直和水平导航栏。通过调整CSS属性如height、line-height和float，可以轻松实现导航栏布局。文章还介绍了如何通过设置border、background等样式美化导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul></ul>和<li></li>标记是区块。

垂直导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body{margin:50px;}
	ul{list-style-type:none;padding:0;width:160px;font-size:20px;}
	li{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
</style>
<title>列表与导航</title>
</head>
<body>
	<ul>
		<li>么么哒</li>
		<li>嗯嗯啊</li>
		<li>哇咔咔</li>
		<li>啦啦啦</li>
	</ul>
</body>
</html>

注意，height属性是指区块的行高，line-height属性是指文字的行高，当两者一致，并将text-align属性设置为center时，就达到了将文字居于每个区块行中间的目的。同样的设置对<ul></ul>标记也有效。

水平导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body{margin:50px;}
	#setting1{list-style-type:none;padding:0;width:160px;font-size:20px;}
	#setting2{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
	#setting3{list-style-type:none;padding:0;width:800px;font-size:20px;line-height:30px;background:#ddd}
        #setting4{float:left;background:#ddd;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;padding:5px 20px;}
</style>
<title>列表与导航</title>
</head>
<body>
	<ul ID="setting1">
		<li ID="setting2">么么哒</li>
		<li ID="setting2">嗯嗯啊</li>
		<li ID="setting2">哇咔咔</li>
		<li ID="setting2">啦啦啦</li>
	</ul>
	<br/><br/><br/><br/><br/><br/><br/>
	<ul ID="setting3">
		<li ID="setting4">么么哒</li>
		<li ID="setting4">嗯嗯啊</li>
		<li ID="setting4">哇咔咔</li>
		<li ID="setting4">啦啦啦</li>
	</ul>
</body>
</html>

如果要让列表条目在同一行，可以在<li></li>标记中用属性float:left来定位条目。另外padding属性用于控制条目中文字的间隔，第一个设置值0代表与区块顶端的距离，第二个设置值30px代表与区块左端的距离。