更改悬停时的字体大小移动其他 div答案

【问题标题】：Change font size on hover move other divs更改悬停时的字体大小移动其他 div
【发布时间】：2013-01-11 19:40:04
【问题描述】：

我想在元素上悬停时更改字体大小，我遇到的问题是，当我在一个项目上移动时，列表的其他 div 会向下移动。这是我的代码：

CSS

a{
    /* position:absolute */
    font-size:16px;
}

a:hover {
    color:#0033CC;
    font-size:18px;
}

#menu_list{
    width:859px;
    cursor:pointer;
    }

#menu_list li{
    width:130px;
    height:21px;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    }

HTML

<ul id="menu_list">
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
</ul>

这是JSFiddle。

正如你所看到的，我为元素写了 position:absolute，这很有效，这意味着 div 保持静止，但如果我这样做，我不知道如何使我的文本居中。我猜问题是该元素没有上边距，所以我也尝试了，但我猜对于内联元素不可能设置边距，或者我现在没有正确的方法。

【问题讨论】：

标签： html css

【解决方案1】：

您应该将line-height 分配给最外层的内联元素（在您的示例中为<li>），该值至少等于内部元素的最大尺寸（悬停时）。

此外，您还应该将vertical-align: middle 分配给内部元素（锚点）；没有它，它们的底部边缘会对齐，从而产生不和谐的视觉效果。

不需要position: absolute。

See it in action.

【讨论】：

谢谢，我选择这个作为正确答案是因为解释和奖励垂直对齐。

【解决方案2】：

将height:21px 更改为line-height 并减少hover 上的line-height by 1px

a:hover {
    color:#0033CC;
    font-size:18px; line-height:20px;
    }
#menu_list li{
    width:130px;
    line-height:21px;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    }

DEMO

【讨论】：

【解决方案3】：

只需将float:left添加到<li>，其他div的移动完全没有问题。

#menu_list li{

    float:left

}

【讨论】：

【解决方案4】：

您也可以将position: relative 分配给li 并像这样更改a：

a {
    position:absolute;
    font-size:16px;
    display: block;
    width: 130px;
    left: 10px;
}

这可能不是最优雅的解决方案（应该是line-height 之一），但它确实有效。

【讨论】：

我试图这样做，但我也觉得这不是一个很好的解决方案。