Saivan's Blog--=WEB标准的研究，开发=-

Navigation

Comment

Search

Other

为达到最佳的视觉及浏览效果，请您使用Firefox或Opera来浏览本站!

My DouBan

用列表创建完美的横向菜单

2005-9-29

在制作网页当中，我们经常需要制作一个导航条，一般横向的居多，竖向的也有。制作竖向的菜单，当然首先会想到用UL列表来制作啦，但是如果想制作横向的导航菜单呢？用UL能行吗? 告诉你：一定行！基于网上也有很多文章教你怎样用UL做出一个横向的菜单的，但是部分还不是很完美，所以今天也抽空写一点东西，希望能帮助大家！

Xhtml


<p align="left">一个简单的横向菜单:</p>

<ul class="menu lefted">

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

<li><a href="#">菜单四</a></li>

<li><a href="#">菜单五</a></li>

</ul>

<p align="center">英文的(居中)</p>

<ul class="menu centered">

<li><a href="#">Menu01</a></li>

<li><a href="#">Menu02</a></li>

<li><a href="#">Menu03</a></li>

<li><a href="#">Menu04</a></li>

<li><a href="#">Menu05</a></li>

</ul>

<p align="right">中文(居右)</p>

<ul class="menu righted">

<li><a href="#">菜单一</a></li>

<li><a href="#">菜单二</a></li>

<li><a href="#">菜单三</a></li>

<li><a href="#">菜单四</a></li>

<li><a href="#">菜单五</a></li>

</ul>

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用列表创建完美的横向菜单</title>
<style type="text/css">
.menu { 
  display:table;         /* 忽略IE，在IE中它的属性是block */
  padding:0; 
  list-style-type:none;
  white-space:nowrap;    /* 使文本在同一行中 */
  border:1px solid #06a; 
}
* html .menu {
  display:inline-block;  /* for IE only */
  width:1px;             /* IE将会自动适应文本宽度 */
  padding:0 4px;         /* 在IE中左右增加2px的补白 */
}
.menu li {
  display:table-cell;    /* 忽略IE, 在IE中它的性是list-item */
  }
* html .menu li {
  display:inline;        /* for IE only */
  }
.menu a, .menu a:visited {
  display:block;         /* 忽略IE */
  padding:4px 16px;
  color:#000; 
  background:#d4d4d4; 
  border:1px solid #fff; 
  text-decoration:none;
  }
* html .menu a, * html .menu a:visited {
  display: inline-block;  /* for IE only */ 
  margin:0 -4px;         /* 解决IE对CSS-BOX解释的BUG */  
  }
 .menu a:hover {
  color:#fff; 
  background:#08c;
  }
.lefted {margin:0 auto 0 0;}
.centered {margin:0 auto;}
.righted {margin:0 0 0 auto;}
</style>
</head>
<body>
<p align="left">一个简单的横向菜单:</p>
<ul class="menu lefted">
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a></li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a></li>
  <li><a href="#">菜单五</a></li>
</ul>
<p align="center">英文的(居中)</p>
<ul class="menu centered">
  <li><a href="#">Menu01</a></li>
  <li><a href="#">Menu02</a></li>
  <li><a href="#">Menu03</a></li>
  <li><a href="#">Menu04</a></li>
  <li><a href="#">Menu05</a></li>
</ul>
<p align="right">中文(居右)</p>
<ul class="menu righted">
  <li><a href="#">菜单一</a></li>
  <li><a href="#">菜单二</a></li>
  <li><a href="#">菜单三</a></li>
  <li><a href="#">菜单四</a></li>
  <li><a href="#">菜单五</a></li>
</ul>
</body>
</html>

单击这里查看浏览结果

我在IE, Firefox,Opera上浏览都非常正常.

Post at: WEB Standard

全部共有[1]条日志，每页显示(1)篇日志

Comment View ({Count})

{CommentAuthor}	{CommentTime Format="yyyy-mm-dd"}
{CommentContent}
{CommentUrl}{CommentEmail}{CommentIp}