牛刀小试——标题|菜单同行显示的两种实现方式

来源：互联网发布：淘宝有哪些官方手办店编辑：程序博客网时间：2024/05/22 16:59

通常我们会有这样的需求，我们希望在标题的后面加几个小的菜单，让文字在左侧，菜单在右侧。另外，我们还需要考虑到页面的兼容性，闲着没事，自己研究了一番，分别用两种方式做了一个小小的实现。

先上效果图：

那么到底怎么实现呢？请看下文：

方式一：

我们可以通过用浮动来处理该问题，让标题向左浮动，让菜单向右浮动。

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