Question

我有一个简单的导航栏：

<nav>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Register</a>
</nav>

具有以下用于导航的CSS和标签：

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;
    padding:2%;    
}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
}
nav a:hover
{
    background-color:white;
    color:black;
    font-size:120%;            
}

它看起来几乎像我想要的那样，除了导航容器在悬停时会拉伸之外，因为字体大小较大。如何防止导航拉伸？

Answer 1

有一种更简单，更漂亮的方法。您应该尝试这样做。

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;   
}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
    display:inline-block;
}
nav a:hover
{
    background-color:white;
    color:black;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform:scale(1.2);
}

Answer 2

添加“行高”可防止父容器更改尺寸。

nav a
{
    line-height: 5%;
    text-decoration:none;
    color:white;
    padding:2%;    
}

Answer 3

使用其他值代替％。

Answer 4

请在此处查看代码：https://codepen.io/polinq/pen/xxbgZOM 因此，基本上，我在nav元素上设置了高度，并删除了填充。并使用flex将其居中。

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;

    height: 70px;
    display:flex;
    align-items: center;
    justify-content: center;

}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
}
nav a:hover
{
    background-color:white;
    color:black;
    font-size:120%;  

}

如何防止子元素的字体大小更改以在CSS中拉伸父容器

4 个答案: