css设定水平导航栏

最新推荐文章于 2023-12-27 15:06:04 发布

weixin_33895657

最新推荐文章于 2023-12-27 15:06:04 发布

阅读量253

点赞数

原文链接：http://www.cnblogs.com/feng12345/p/5417654.html

版权

有两种设定水平导航栏的方式:（导航栏等于链接列表）

li元素设定为1.行内(inline)或2.进行浮动(float:left)

第一种无法保证链接的宽度相同;

{

display:inline;

}

第二种可以保证宽度，设定a为区块元素，并且设定区块大小(例如:60px)。

{

float:left;

}

{

display:block;

width:60px;

}

第一种的example:

<!DOCTYPE html>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

padding-top:6px;

padding-bottom:6px;

}

{

display:inline;

}

a:link,a:visited

{

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

text-align:center;

padding:6px;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active

{

background-color:#7A991A;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

<p><b>注释：</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。</p>

</body>

</html>

第二种example: