Question

我正试图让导航栏中的一个div在我悬停时获得一个顶部填充。我的问题是我所有的div都会产生相同的效果（它们都会消失），而我只想让其中一个（我正在徘徊），我想让其他人留在同一个地方，相同的高度，没有任何变化。

这是我目前的CSS：

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
}

div:hover{
    padding-top:2em;
}

你有什么建议？

Answer 1

<强> Demo

默认情况下，

inline-block元素为vertically bottom alligned。添加vertical-align: top;

CSS

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top; /* add this */
}
div:hover {
    padding-top:2em;
}

Answer 2

不确定是否理解，因为看起来你非常接近它。在悬停物品上填充并保持兄弟姐妹垂直对齐顶部。

http://jsfiddle.net/2UvSa/

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top;
    transition: padding .5s ease-in;
}

div:hover{
    **padding-top:2em;**
}

Answer 3

将vertical-align: top;放在div上。

JSFiddle Demo

填充导航栏元素会影响所有导航栏

3 个答案: