牛刀小试——标题|菜单同行显示的两种实现方式
通常我们会有这样的需求，我们希望在标题的后面加几个小的菜单，让文字在左侧，菜单在右侧。另外，我们还需要考虑到页面的兼容性，闲着没事，自己研究了一番，分别用两种方式做了一个小小的实现。
先上效果图：
那么到底怎么实现呢？请看下文：
方式一：
我们可以通过用浮动来处理该问题，让标题向左浮动，让菜单向右浮动。
HTML代码：
<div class="test1"> <div class = "title"><h2>Title</h2><div class="menu-list"> <a href="">Menu1</a>| <a href="">Menu2</a></div><div class="clear"></div> </div> <div class = "content">contents</div></div>
CSS代码：
.test1{width:400px;height:300px;margin:10px;}.test1 {border:1px solid #dcdbda;font-size:14px;}.test1 .title{height:25px;line-height:25px;border-bottom:1px solid #dcdbda;background: -moz-linear-gradient(center top , #FCFCFC, #F1F1F1) repeat scroll 0 0 transparent;*background:url(./img/bg-title.png) repeat-x #f5f5f5;*+background:url(./img/bg-title.png) repeat-x #f5f5f5;}.test1 .title h2{float:left;width:60%;margin:0 0 0 10px;color:#666;}.test1 .title .menu-list{float:right;margin-right:10px;padding:0 10px;}.clear{clear:both;}
方式二：
我们可以用相对布局和绝对布局来解决。
HTML代码：
<div class="ui-box test2"><div class="ui-box-title"><h2>Title</h2><div class="title-menu-list"><div class="title-menu"><a href="" class="">Menu1</a></div><div class="title-menu">|</div><div class="title-menu"><a href="" class="">Menu2</a></div> </div> <div class="clear"></div></div><div class="ui-box-content">content</div> </div>
CSS代码：
.test2{width:400px;height:300px;margin:10px;}.ui-box{border:1px solid #dcdbda;position:relative;}.ui-box-title{border-bottom: 1px solid #CCCCCC;height: 14px;line-height: 16px;padding: 5px 10px 6px;position: relative;font-size:14px;color:#666;background: -moz-linear-gradient(center top , #FCFCFC, #F1F1F1) repeat scroll 0 0 transparent;*background:url(./img/bg-title.png) repeat-x #f5f5f5;*+background:url(./img/bg-title.png) repeat-x #f5f5f5;}.ui-box-title h2{color:#666;margin:0;padding:0;}.ui-box-content{background-color:#fff;padding:5px;}.ui-box-title .title-menu-list{position: absolute;right: 10px;top: 5px;padding:0px 10px;}.ui-box-title .title-menu{position: relative;padding:0px 5px;float:right;}.clear{clear:both;}
Demo下载地址：http://download.csdn.net/download/yima1006/4892485