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;，则无法正确显示图像。

我也尝试删除display：block并将float：left放在两个类中，但仍无效。

如果有人能为我提供解决方案，我将不胜感激。

非常感谢。

Answer 1

要使图像浮动，您必须指定元素的宽度并设置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);
}

并排显示图像

2 个答案: