你们将如何处理这个问题，Hover 在导航栏中的文本上，增加了所有内容之间的空间 [关闭]

Question

关闭。 这个问题需要更加集中。 它目前不接受答案。

---

想改进这个问题？ 更新问题，使其仅通过编辑此帖子专注于一个问题。

8 个月前关闭。

改进这个问题

正如你们所看到的，因为在 NAVBAR 内有一个空间来分隔内容，当我增加字体大小时，它会将所有内容推向左侧或右侧。 有没有办法在边距之间添加空白空间或其他东西，这样它就可以自由地使用额外的空间，而无需根据我悬停的内容将内容向左或向右推。

 @media only screen and (min-width: 1920px){ body { background-color: #F0F2F5; width:1920px; height:800px; } } #JGLogo { position: relative; top:8px; left:-250px; }.NavBar { margin-top: 15px; text-align: center; width:100%; height:10%; background-color: white; border-bottom: 1px solid #E3E3FF; }.NavBar a { position: relative; top:-15px; margin-right: 55px; font-size: 32px; color: #62ACFF; text-decoration: none; }.NavBar a:hover { font-size: 36px; }

 <html> <head> <link rel="stylesheet" href ="Layout.css"> <title>JGardam</title> <div class="NavBar"> <img id="JGLogo" src="Images/JGLogo.png"> <a href = "">Home</a> <a href = "">About Me</a> </div> </head> <body></body> <footer></footer> </html>

Answer 1

首先，如上面评论中所述， head标签不应包含任何标记。 您必须将标记放在body标记内。

我将通过使用规则transform: scale() for tag a:hover 。 像这样：

.NavBar a:hover {
    transform: scale(1.1);
}

此外，您应该为标签a设置这些规则：

.NavBar a {
    ...
    transition: .5s;
    display: inline-block;   
    ...
}

 #JGLogo{ position: relative; top:8px; left:-250px; }.NavBar{ margin-top: 15px; text-align: center; width:100%; height:10%; background-color: white; border-bottom: 1px solid #E3E3FF; }.NavBar a{ position: relative; top:-15px; margin-right: 55px; transition: .5s; display: inline-block; font-size: 32px; color: #62ACFF; text-decoration: none; }.NavBar a:hover{ /*font-size: 36px;*/ transform: scale(1.1); } @media only screen and (min-width: 1920px){ body{ background-color: #F0F2F5; width:1920px; height:800px; } }

 <html> <head> </head> <body> <link rel="stylesheet" href ="Layout.css"> <title>JGardam</title> <div class="NavBar"> <img id="JGLogo" src="Images/JGLogo.png"> <a href = "">Home</a> <a href = "">About Me</a> </div> </body> <footer></footer> </html>