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

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

html css

如何防止文本大小更改时html div扩展,html,css,Html,Css,所以，我有一个导航栏。我希望每个链接文本在悬停时变大并加粗。我已经使用css实现了这一点，但是现在每当鼠标悬停在链接上时，文本大小就会增加，但是div也会增加以容纳文本。关于如何解决这个问题有什么想法吗。以下是JSFIDLE链接：代码： #航行{ 背景色：黑色；宽度：98%；字体系列：calibri；填充：1%；左边距：0px；位置：绝对位置；排名：0；左：0；显示：块； } #导航{ 列表样式类型：无； } ul#nav li{ 浮动：左；填充：0.6%；

所以，我有一个导航栏。我希望每个链接文本在悬停时变大并加粗。我已经使用css实现了这一点，但是现在每当鼠标悬停在链接上时，文本大小就会增加，但是div也会增加以容纳文本。关于如何解决这个问题有什么想法吗。以下是JSFIDLE链接：

代码：









#航行{
背景色：黑色；
宽度：98%；
字体系列：calibri；
填充：1%；
左边距：0px；
位置：绝对位置；
排名：0；
左：0；
显示：块；
}
#导航{
列表样式类型：无；
}
ul#nav li{
浮动：左；
填充：0.6%；
}
.导航链接{
显示：块；
背景色：黑色；
文字装饰：无；
颜色：白色；
}
.navlink:悬停{
字体大小：粗体；
字号：14pt；
}

添加一个

最大高度：30px至#导航

一般来说，如果您正在寻找能够从美学角度改变形状/大小的东西，那么使用最小/最大宽度（以像素为单位）比使用%更容易
 修复水平推送：
与使用填充
分隔项目不同，一种解决方案是使用宽度
和文本对齐：居中以便项目不会将其他项目推到后面
要固定垂直推力：
一种解决方案是指定一个行高
等于最大的字体大小
（这将是您的：悬停
大小）

#导航{
背景色：黑色；
宽度：98%；
字体系列：calibri；
填充：1%；
左边距：0px；
位置：绝对位置；
排名：0；
左：0；
显示：块；
}
#导航{
列表样式类型：无；
}
ul#nav li{
浮动：左；
宽度：15%；
文本对齐：居中；
}
.导航链接{
显示：块；
背景色：黑色；
文字装饰：无；
颜色：白色；
线路高度：14pt；
}
.navlink:悬停{
字体大小：粗体；
字号：14pt；
}








谢谢，我甚至不想为水平推而烦恼。没问题！如果您发现我们的答案之一是解决方案，请确保在有机会时将其标记为解决方案。祝你的网站好运！这个答案节省了我很多时间！简单完美
    <!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; 
}