通过设置div的float属性,我们可以很方便的得到如博客园或google主页一样的主菜单。
首先定义两个div来放置菜单,右边菜单放在前面:
1
<div id="rightmenu">
2
<a herf="*">登录</a> ·
3
<a herf="*">注册</a>
4
</div>
5![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
<div id="leftmenu">
7
<a herf="*">社区</a> |
8
<a herf="*">新闻</a> |
9
<a herf="*">招聘</a> |
10
<a herf="*">闪存</a> |
11
<a herf="*">网摘</a> |
12
<a herf="*">Java博客</a>
13
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
定义CSS:
#rightmenu
{
height: 23px;
float: right;
}
#leftmenu
{
定义需要的格式
}
{
height: 23px;
float: right;
}
#leftmenu
{
定义需要的格式
}
这样实现应该是最简单的。 最关键的两点是:右边菜单的div在前,设置右边菜单向右浮动。