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

So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:

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

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

2 个解决方案

#1

To fix the horizontal pushing: Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.

要修复水平推动:不是使用填充来将项目分开,一种解决方案是使用width和text-align:center;这样物品就不会推动其他物品。

To fix the vertical pushing: One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)

要修复垂直推动:一种解决方案是指定一个等于最大字体大小的行高(这将是你的:悬停大小)

http://jsfiddle.net/ww8L9/

#2

Add a max-height: 30px; to #navigation.

添加最大高度:30px;到#navigation。

In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.

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

#1