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

Question

我正在尝试做类似标签的事情(我不确定如何调用它们)。当一个选项卡悬停时，它会增加该选项卡的底部填充(视觉上看起来像是出现了)。

那些，将位于导航的顶部，所以我将它们放在标题的底部。

问题是，它移动了所有的标签!不仅仅是我徘徊的那个。我一直在更改绝对/相对位置并添加/删除 .actionsWrap div，但没有像我预期的那样工作。此外，这些容器需要绝对定位到标题。

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

https://jsfiddle.net/0yu921xp/

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>

CSS

header 
{
    position: relative;
    height: 200px;
    border-bottom: 1px solid black;
}

header .actionsWrap 
{
    position: absolute;
    bottom: 0; 
}

header .actionsWrap .actions 
{
    position: relative; 
}

header .actionsWrap .actions div 
{
    position: relative;
    float: left;
    width: 50px; 
}

header .actionsWrap .actions div a 
{
    padding: 15px;
    text-align: center;
    display: block; 
}

header .actionsWrap .actions div a:hover 
{
    padding-bottom: 30px; 
}

header .actionsWrap .actions .search 
{
    color: khaki;
    background-color: darkcyan; 
}

header .actionsWrap .actions .help 
{
    color: darkblue;
    background-color: lightblue; 
}

header .actionsWrap .actions .call 
{
    color: yellowgreen;
    background-color: bisque; 
}

谢谢

Answer 1

由于您在那些无法控制垂直对齐的元素上设置了float，因此一种选择是使用inline-block:

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

Jsfiddle Demo