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

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.

看到它在行动.