如何使用 CSS 将两个箭头图像（upvote/downvote）堆叠在一起？答案

【问题标题】：How can I stack two arrow images (upvote/downvote) on top of eachother using CSS?如何使用 CSS 将两个箭头图像（upvote/downvote）堆叠在一起？
【发布时间】：2010-10-20 07:50:22
【问题描述】：

uparrow.gif 和 downarrow.gif

所以，它看起来像这样：

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

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

我应该创建一个宽度受限的“投票”div吗？我会浮动：顶部和浮动：底部两个箭头div，背景设置为我的两个图像吗？我计划将内容直接放在投票箭头的右侧，因此需要限制和严格。

【问题讨论】：

标签： css

【解决方案1】：

一个比 div 更语义和更有效的解决方案是这样，它还负责定位投票框。

.content-item {padding-left:110px;position:relative; width:500px;border:1px solid red;}
.vote{width:100px;position:absolute; top:0; left:0;border:1px solid red;}
.vote h4 {style heading how you like}
.vote img{width:100px;height:30px;background:black;}

<div class="content-item"> content 
    <div class="vote">
    <h4>Vote</h4> 
    <img alt="vote up" src="..." />
    <img alt="vote down" src="..." />
    </div>
</div>

【讨论】：

【解决方案2】：

不要对图像使用 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 中添加一些边距，以将其与旁边的内容分开。

【讨论】：

【解决方案3】：

使用 2 个 div。将文本 div 向左浮动并将两个图像放在一个 div 中。使用 display: block 在图像上强制一个低于另一个。

【讨论】：

【解决方案4】：

默认情况下，<div> 元素是 block-level，这意味着它们是每行一个，并且会水平扩展以填充其容器。

添加点击处理是另一个问题。您可以在 uparrow 和 downarrow 元素中包含 <a> 和 <img> 元素，或者按照您的建议在 CSS 中执行（不太兼容的方式）。另一种选择是使用 Javascript 注册 DOM 事件。

HTML：

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

CSS：

div.vote {
  width: 50px;
  float: left;
}

div.uparrow {
  background-image: url(...);
}

div.downarrow {
  background-image: url(...);
}

【讨论】：