css - 如何使用 CSS 将两个箭头图像(赞成票/反对票)叠加在一起？

Question

上箭头.gif 和下箭头.gif

所以，它看起来像这样:

我如何创建 3 个 div 并使用 CSS 设置它们的样式，使这些箭头位于顶部箭头位于底部箭头上方的位置？

<div class="vote">  
<div class="uparrow" />  
<div class="downarrow" />  
</div>

我应该创建一个宽度受限的“投票”div 吗？我会 float: top 和 float: bottom 将背景设置为我的两个图像的两个箭头div吗？我计划将内容直接放在投票箭头的右侧，因此需要对其进行限制和压缩。

Answer 1

不要对图像使用 div - 已经有一个非常好的 img 标签!

<div class="vote">
    <img alt="^" title="vote up"   src="/images/up.arrow.png" />
    <img alt="v" title="vote down" src="/images/down.arrow.png" />
</div>

然后简单地:

.vote
{
    width: 15px;
    float: left; clear: left;
}

.vote img
{
    display: block;
    float: none; clear: both;
}

您可能希望为 .vote 添加一些边距，以将其与其旁边的内容分开。