Question

所以，我有一个导航栏。我希望每个链接文本在悬停时增长和加粗。我已经使用css实现了这一点，但是现在每当鼠标悬停在链接上文本大小增长时，bt也可以容纳该文本。有想法该怎么解决这个吗。这是jsfiddle链接：

CODE：

    <!DOCTYPE html>
<body>
    <div id = "navigation">
        <ul id = "nav">
            <li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
            <li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
            <li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
            <li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
            <li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
        </ul>
    </div>
</body>

#navigation{
    background-color:black;
    width:98%;
    font-family:calibri;
    padding:1%;
    margin-left:0px;
    position:absolute;
    top:0;
    left:0;
    display:block;
}
#nav{
    list-style-type:none;
}
ul#nav li{
    float:left;
    padding:0 6%;
}
.navlink{
    display:block;
    background-color:black;
    text-decoration:none;
    color:white;
}
.navlink:hover{
    font-weight:bold;
    font-size:14pt; 
}

Answer 1

修复水平推送： 一个解决方案是使用padding和width，而不是使用text-align: center;来区分项目，以便项目不会推送其他项目。

修复垂直推送： 一种解决方案是指定line-height等于最大font-size（这将是您的:hover大小）

http://jsfiddle.net/ww8L9/

Answer 2

将max-height: 30px;添加到#navigation。

一般来说，如果您正在寻找能够美观地改变形状/尺寸的东西，那么使用最小/最大宽度（以像素为单位）更容易，而不是％。

如何防止html div在文本大小更改时扩展

2 个答案: