6

我想在元素上悬停时更改字体大小，我遇到的问题是当我移动一个项目时，列表的其他 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 保持静止，但如果我这样做，我不知道如何使我的文本居中。我猜问题是该元素没有上边距，所以我也尝试了，但我猜对于内联元素，它不可能设置边距，或者我现在没有正确的方法。

4

4 回答 4

6

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

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

没有必要position: absolute。

看到它在行动。

于 2013-01-11T11:28:38.060 回答
0

改减on height:21px_line-heightline-height by 1pxhover

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; 
    }

演示

于 2013-01-11T11:27:50.103 回答
0

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

#menu_list li{

    float:left

}
于 2013-01-11T11:30:36.433 回答
0

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

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

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

于 2013-01-11T11:40:04.813 回答