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

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

正如你所看到的我写的位置：绝对的元素，这是有效的，这意味着divs保持不变，但我无法弄清楚如果我这样做如何居中文本。我猜想问题是元素没有顶边距，所以我也尝试过，但是我认为对于内联元素来说，不可能设置边距，或者我现在不是正确的方式。

来源

2013-01-11 Ende Neu

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

此外，你还应该给vertical-align: middle内部元素（锚点）;没有它的话，它们的底部边缘会对齐，产生令人不安的视觉效果

不需要position: absolute。

See it in action。

来源

2013-01-11 11:28:38 Jon

谢谢，我选择这个作为正确的答案，因为解释和奖金vertical-align。 –

变化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

来源

2013-01-11 11:27:50 Sowmya

只需将float:left添加到<li>，您将不会遇到其他div的移动问题。

#menu_list li{ 

    float:left 

}

来源

2013-01-11 11:30:36

您也可以分配position: relative到li和改变a这样的：

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

这不是最优雅的解决方案成为可能（这应该是line-height之一），但它的作品。

来源

2013-01-11 11:40:04 Copons

我试图去那样的方式，但我觉得它不是一个很好的解决方案。 –

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

回答

相关问题