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

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/