纯 CSS 打造标准的导航菜单－1

作者：vkvi 来源：ITPOW（原创）日期：2008-9-11

本连载分三节讲述如何利用 CSS 打造一个符合标准、兼容各浏览器（IE6 除外、IE7 可以）的导航菜单。

菜单内容全部使用 ul，利用 CSS 将 ul 变成需要的样式，本节讲述最简单的：如何把原本竖着的 ul 横着显示。

其实很简单，就是对 li 使用样式 display:inline;，也可以使用 float:left，但在兼容性方面相对来说要复杂一些。

<?xml version="1.0" encoding="gb2312"?>
<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ITPOW - 网页技术 永无止境</title>
<style type="text/css">
body
{
    line-height:150%;
    font-size:13px;
}

ul
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    border:1px solid #009999;
    background-color:#FFFFFF;
    list-style-type:none;
}

a:link
{
    font-size:13px;
    text-decoration:none;
}

a:hover
{
    font-size:13px;
    text-decoration:none;
}

a:visited
{
    font-size:13px;
    text-decoration:none;
}
/*========================================*/
/*========================================*/
.nav .navItem
{
    display:inline;
}
</style>
</head>

<body>

<ul class="nav">
  <li class="navItem"><a href="/">网站首页</a></li>
  <li class="navItem"><a href="/products/">ITPOW产品</a></li>
  <li class="navItem"><a href="/docs/">技术文档</a></li>
</ul>

<p>网页内容</p>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]