Question

我试图让我的导航栏上的文字在悬停时变大，我已设法做到这一点但是当我这样做时，其他文字链接稍微向下移动并将其他文本链接推到对（除了最后一个）

这是我的代码：

/* -----------------------------------------------------------------*/

html, body {
margin:0;
padding:0;

}

.header {
margin-top:-7px;
background-color:#333333; 
height:70px;
}

.container {
 max-width: 940px;
 margin: 0 auto;
 padding: 30px 10px;
}

.nav {
list-style-type: none;
margin: 0;
padding: 0px 0;
color:white;
}

.nav li {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 15px;
margin-right: 25px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
} 


/* NAV PROPERTIES */

.nav li:hover{
cursor: pointer;
font-size:18px;
text-shadow:0px 0px 5px white;
margin-top: 10px; 
padding: 6px;
}

Answer 1

在.nav li

上定义行高

.nav li {
    line-height: 10px;
}

https://jsfiddle.net/gnd6q0sp/1/

Answer 2

您正在更改列表项的大小和边距...当然其他链接会移动......这就是应该发生的事情。

一种选择是使用转换直观地缩放列表项。

.nav li:hover{
    transform:scale(1.1);
    cursor: pointer;
    text-shadow:0px 0px 5px white;
}

JSfiddle Demo

注意：我不推荐此选项，我认为有更好的方法可供您使用。

如何在悬停时停止在导航栏上向下移动的其他文本？

2 个答案: