html/css悬停-添加填充底部而不移动其余元素

我试着做一些类似标签的事情（我不知道如何称呼它们）。当一个选项卡悬停时，它会增加该选项卡的填充底部（从视觉上看，它看起来像是向上的）

这些将位于导航的顶部，因此我将它们放置在标题的底部

问题是，它会移动所有选项卡！不只是我在徘徊的那个。我一直在更改绝对/相对位置并添加/删除.actionsWrap div，但没有任何效果。此外，这些容器需要绝对放置在收割台上

有人能看出我做错了什么吗？请参阅附加的JSFIDLE，因为您可以更容易地理解我的意思

html

<header>
    <div class="container">
        <div class="actionsWrap">
            <div class="actions">
                <div><a class="search fa fa-2x fa-search" href="" alt="" title=""></a></div>
                <div><a class="help fa fa-2x fa-question" href="" alt="" title=""></a></div>
                <div><a class="call fa fa-2x fa-phone" href="" alt="" title=""></a></div>
            </div>
        </div>
        <img class="logo" src="ttp://res.cloudinary.com/demo/ image/upload/ w_133,h_133,c_thumb,g_face/ bike.jpg" alt=""/>
    </div>
</header>

---

谢谢

因为在那些无法控制垂直对齐的元素上有

浮动

，一个选项是使用

内联块

：

header .actionsWrap .actions div {
   position: relative;
   display:inline-block;
   margin-right:-4px;
   vertical-align:bottom;
   width: 50px; 
}

---

由于这些元素上有

float

，无法控制垂直对齐，因此一个选项是使用

inline block

：

header .actionsWrap .actions div {
   position: relative;
   display:inline-block;
   margin-right:-4px;
   vertical-align:bottom;
   width: 50px; 
}

---

将

display:inline

属性添加到

或下面的代码段：


标题{
位置：相对位置；
高度：200px；
边框底部：1px纯黑；}
标题.actionsWrap{
位置：绝对位置；
底部：0；}
header.actionsWrap.actions{
位置：相对；}
header.actionsWrap.actions div{
位置：相对位置；
浮动：左；}
标题.actionsWrap.actions分区a{
填充：15px；
文本对齐：居中；
显示：block；}
header.actionsWrap.actions分区a:悬停{
填充底部：30px；显示：内联；}
header.actionsWrap.actions.search{
颜色：卡其色；
背景色：深黄色；}
header.actionsWrap.actions.help{
颜色：深蓝色；
背景色：浅蓝色；}
header.actionsWrap.actions.call{
颜色：黄绿色；
背景色：bisque；}
将
显示：内联
属性添加到
或下面的代码段：


标题{
位置：相对位置；
高度：200px；
边框底部：1px纯黑；}
标题.actionsWrap{
位置：绝对位置；
底部：0；}
header.actionsWrap.actions{
位置：相对；}
header.actionsWrap.actions div{
位置：相对位置；
浮动：左；}
标题.actionsWrap.actions分区a{
填充：15px；
文本对齐：居中；
显示：block；}
header.actionsWrap.actions分区a:悬停{
填充底部：30px；显示：内联；}
header.actionsWrap.actions.search{
颜色：卡其色；
背景色：深黄色；}
header.actionsWrap.actions.help{
颜色：深蓝色；
背景色：浅蓝色；}
header.actionsWrap.actions.call{
颜色：黄绿色；
背景色：bisque；}
编辑：添加了第二个解决方案

1.）将添加空间延伸至容器边界以下：

header .actionsWrap {
  position: absolute;
  top: 138px; 
}

将
.actionsWrap
的位置从
底部：0
更改为
顶部：138px
以将其顶部边框固定到容器顶部，而不是将底部边框固定到容器底部：

header .actionsWrap {
  position: absolute;
  top: 138px; 
}


2.）要使三个元素的底部边框仍与悬停时容器的底部边框对齐：

使用
垂直对齐：底部，将
.actions div
的显示更改为
内联块

header .actionsWrap .actions div {
    display: inline-block;
    vertical-align: bottom;
    width: 50px; 
}


（请注意，HTML代码略微改变，以避免三个元素之间出现空白）
编辑：添加了第二个解决方案

1.）将添加空间延伸至容器边界以下：

header .actionsWrap {
  position: absolute;
  top: 138px; 
}

将
.actionsWrap
的位置从
底部：0
更改为
顶部：138px
以将其顶部边框固定到容器顶部，而不是将底部边框固定到容器底部：

header .actionsWrap {
  position: absolute;
  top: 138px; 
}


2.）要使三个元素的底部边框仍与悬停时容器的底部边框对齐：

使用
垂直对齐：底部，将
.actions div
的显示更改为
内联块

header .actionsWrap .actions div {
    display: inline-block;
    vertical-align: bottom;
    width: 50px; 
}


（请注意，HTML代码稍有改动，以避免三个元素之间出现空格）
请举手。。。。我不允许做这种事情（负边距来解决元素之间的内联块空间），但是，这似乎是最好的方法，所以我会保留它，以防万一：）np mate有其他方法来解决内联块之间的sapce，只是为了一个快速的答案，我在这里使用它@eve\u mf很高兴帮助uanswer竖起大拇指。。。。我不允许做这种事情（负边距来解决元素之间的内联块空间），但是，这似乎是最好的方法，所以我将保留它，以防万一：）np mate有其他方法来解决内联块之间的sapce，只是为了快速回答我在这里使用它@eve\u mf很高兴帮助uok。。。我不明白为什么它在你的代码段中没有这样做，但在我的代码中，display:inline使锚点不是div的50px宽度。但我将从这里开始使用它！谢谢，我将接受DaniP的回答，因为虽然这不是理想的，因为我的团队要求，这是一个最好的工作和顺利。你的行为如我所愿，但它会随着按钮的变化而改变OK。。。我不明白为什么它在你的代码段中没有这样做，但在我的代码中，display:inline使锚点不是div的50px宽度。但我将从这里开始使用它！谢谢，我将接受丹尼普的回答，尽管这不是理想的贝卡