並排顯示圖像

Question

我想並排顯示2個箭頭鏈接，但我得到一些CSS錯誤。

我的HTML代碼如下：

<div> 
    <a href="javascript:void(0);" id="move_down"> <span class="down_arrow">&nbsp;</span> </a> 
    <a href="javascript:void(0);" id="move_up"> <span class="up_arrow">&nbsp;</span></a> 
    </div> 

CSS：

.down_arrow{ 
display:block; 
background: url(../images/down_arrow.png) no-repeat left center; 
} 

.up_arrow{ 
display:block; 
background: url(../images/up_arrow.png) no-repeat left center; 
} 

目前，顯示一個下面的另一個圖像。然後我想要並排顯示。 但是，如果我刪除在css display:block;，圖像顯示不正確。

我也嘗試刪除顯示：塊並把浮動：左兩個類，但仍然無法正常工作。

如果有人能爲我提供解決方案，我將不勝感激。

很多很多，謝謝。

Answer 1

要使圖像浮動，必須指定y元素的寬度並設置float屬性。 CSS的必須是這樣的

.down_arrow{ 
display:block; 
background: url(../images/down_arrow.png) no-repeat left center; 
float:left; 
width:100px; 
} 

.up_arrow{ 
display:block; 
background: url(../images/up_arrow.png) no-repeat left center; 
float:left; 
width:100px; 
} 

您的示例，請參見http://jsfiddle.net/fq3Eg/，我調整了CSS和它的作品。

Answer 2

實際上，你可以刪除SPAN標記，做這樣的事情...

演示：http://jsfiddle.net/wdm954/juGME/1

演示2：（箭頭圖像）：http://jsfiddle.net/wdm954/juGME/2/

<div> 
    <a href="javascript:void(0);" id="move_down" class="down_arrow"></a> 
    <a href="javascript:void(0);" id="move_up" class="up_arrow"></a> 
</div> 

CSS .. 。

#move_down, #move_up { 
    float: left; 
} 
.down_arrow, .up_arrow { 
    width: 50px; 
    height: 50px; 
    background-color: #ccc; 
} 
.down_arrow { 
    background-image: url(path/to/img); 
} 
.up_arrow { 
    background-image: url(path/to/img); 
}