Question

我想在悬停在元素上时更改字体大小，我遇到的问题是当我移动一个项目时，列表的其他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。

正如你所看到的，我写了一个位置：绝对的元素，这是有效的，这意味着div保持不变，但如果我这样做，我无法弄清楚如何将文本居中。我猜测问题是该元素没有上边距，所以我也试过了，但我想内联元素不可能设置边距，或者我现在没有正确的方法。

Answer 1

你应该给最外层内联元素（在你的例子中是line-height）一个<li>，至少等于内部元素的最大尺寸（在悬停时）。

此外，您还应该将vertical-align: middle赋予内部元素（锚点）;没有它，它们的底边对齐，产生刺耳的视觉效果。

不需要position: absolute。

<强> See it in action

Answer 2

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

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

Answer 3

只需将float:left添加到<li>，您就可以轻松移动其他div。

#menu_list li{

    float:left

}

Answer 4

您也可以将position: relative分配给li并更改a，如下所示：

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

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

在悬停时更改字体大小移动其他div

4 个答案: