示例分析程式碼：

		<div id="channel_tit" class="round_top">
			<span class="rtl rtl1"></span>
			<h2>安卓首頁><a href="http://www.feiliu.com/android/game/list.htm">安卓遊戲</a>> 角色育成 <span class="orderbydown down"><a href="javascript:void(0);" title="">下載量排序</a><b></b></span><span class="orderbytime down"><a href="#" title="">時間排序</a><b></b></span></h2>
			<span class="rtr rtr1"></span>
		</div>
 

#channel_tit h1,#channel_tit h2{
	background:none;
	font-size:14px;
	padding-left:10px;
	height:34px;
	line-height:34px;
	width:650px;
}
/*排序開始 20120503*/
#channel_tit h2 span{
	position:relative;
	font-weight:300;
	float:right;

}
#channel_tit h2 span a{
	padding-right:20px;
	padding-left:10px;
	position:relative;
	z-index:2;
	float:left;
}
#channel_tit h2 span b{
	background-image:url('../images/bg_icon.png');
	background-repeat:no-repeat;
	overflow:hidden;
	position:absolute;
	right:2px;
	top:10px;
	display:block;
	width:14px;
	height:14px;
	z-index:1;
}

#channel_tit span.up b{
	background-position:-9px -8px;
}
#channel_tit span.down b{
	background-position:-37px -8px;
}
/*排序結束*/
 

我們要實現的是如圖所示的顯示效果，這裡需要讓排序部分顯示在右側，但是這段程式碼在IE6、IE7、IE8下面都會換行，顯示在第二行，並不是我們想要看到的效果。

相信很多人在使用float:right;的時候都遇到過向右浮動不好使的情況，比如，對於類似這段html程式碼：<h2>小標題<a href="#">更多&gt;&gt;</a></h2>，對a設定向右浮動，在IE下會跑到第二行顯示。

這裡結合自己的經驗，給出三種解決方法：

1、最簡單的方法就是調換順序，將需要右浮動的元素寫在前面。寫成這樣：<h2><a href="#">更多&gt;&gt;</a>小標題</h2> 。但是我們覺得這樣排列順序的寫法有違背html文件語義化的嫌疑，因此，不建議大量使用這種寫法。

上述例項程式碼改為如下順序，IE下避免了換行，得到正確的排版效果。

		<div id="channel_tit" class="round_top">
			<span class="rtl rtl1"></span>
			<h2><span class="orderbydown down"><a href="javascript:void(0);" title="">下載量排序</a><b></b></span><span class="orderbytime down"><a href="#" title="">時間排序</a><b></b></span>安卓首頁><a href="http://www.feiliu.com/android/game/list.htm">安卓遊戲</a>> 角色育成 </h2>
			<span class="rtr rtr1"></span>
		</div>

2、父標籤使用相對定位，子元素使用絕對定位。由於IE裡元素右浮動會影響到它的兄弟元素，所以為了避開有浮動，可以採用position定位，達到同樣的顯示效果。程式碼這裡從略。

3.浮動一左一右，元素塊清晰區分開。<h2><span>小標題</span><a href="#">更多&gt;&gt;</a></h2> 這裡對 h2 span{float:left;} 對h2 a{float:right;}。如果是新聞列表<li><a href="#">新聞標題一</a> <span>2012-05-03</span></li>則css可以定義為ul li a{float:left;}，ul li span{float:right;}。

上述方法運用在示例程式碼中，生效，即為：

	<h2>
		<em>安卓首頁><a href="http://www.feiliu.com/android/game/list.htm">安卓遊戲</a>> 角色育成 </em>
		<span class="orderbydown down"><a href="javascript:void(0);" title="">下載量排序</a><b></b></span>
		<span class="orderbytime down"><a href="#" title="">時間排序</a><b></b></span>
	</h2>

樣式定義增加對em的定義：

#channel_tit h2 em{
	float:left;
}
#channel_tit h2 span{
	position:relative;
	font-weight:300;
	float:right;
}

補充：此處功能為列表頁排序，排序規則上升與下降icon的切換使用jquery實現方式：

<script type="text/javascript">
$(document).ready(function(){
	$("#channel_tit h2 span").toggle(function(){
		$(this).removeClass("down").addClass("up");
	},function(){
		$(this).removeClass("up").addClass("down");
	});
})
</script>

但是由於jquery的預設行為，在執行js的同事，阻止了頁面url的跳轉，因此應該對a新增click事件，程式碼改為：

<script type="text/javascript">
$(document).ready(function(){
//只有用在a的click事件js起作用的同時，url跳轉才起作用
	$("#channel_tit h2 span a").click(function(){
		if ($(this).parent().is('.down')) {
			$(this).parent().removeClass("down").addClass("up");
			$(this).preventDefault();
		}
		if ($(this).parent().is('.up')) {
			$(this).parent().removeClass("up").addClass("down");
			$(this).preventDefault();
		}
	});
})
</script>

或者令該排序按鈕的樣式固定為down，只執行單向排序顯示，如果這樣就不再需要這段js了。

當然了，這時，為了增強使用者體驗，讓使用者點選選中的排序方式區別去其他，可以定義一個選中類，來突出顯示當前選中的排序方式。

#channel_tit h2 span.order a,#channel_tit h2 span a:hover{
    color:#f22;
    font-weight:500;
}