我的导航链接上的 hover 选择器中使用的字母间距使我的徽标在导航栏中横向移动
[英]the letter-spacing used in my hover selector on my nav-links is making my logo shift sideways in my navigation bar
问题描述
I created a conventional nav-bar using flexbox.
我使用 flexbox 创建了一个传统的导航栏。 the nav-bar contained 3 divs.导航栏包含 3 个 div。 Two just had a navlink each while the third contained an image(logo).两个只有一个导航链接，而第三个包含一个图像（徽标）。 the 3 divs are aligned horizontally. 3个div水平对齐。 the image being in center I styled the two nav-links with a hover effect that separates the letters when a cursor hovers over it.图像在中心我使用 hover 效果为两个导航链接设置样式，当 cursor 悬停在其上时，该效果将字母分开。
*{ box-sizing:border-box; } body{ background-color:rgb(139, 200, 50); } nav{ display:flex; justify-content:space-between; } #Logo{ padding:10px; margin:0; border:0; background-color: black; } #button{ align-self:center; } #button a { text-align: center; padding: 10px 30px; border: white solid; border-radius: 30px; cursor: pointer; text-decoration: none; font-family: 'Heebo', sans-serif; color:white; letter-spacing: 1px; transition: 0.8s; } #button a:hover{ color: rgb(139, 200, 50); padding: 15px 35px; letter-spacing: 3px; background-color:#fff;
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>Treetop</title> </head> <body> <nav > <div id="button"> <a href="">PRODUCTS</a> </div> <div id="logo"> <img src="/img/logo.png" alt="logo"> </div> <div id="button"> <a href="#">CONTACT</a> </div> </nav> <body>
NOW, the issue is that my image keeps shifting sideways anytime i hover over those nav-links.现在，问题是我的图像在 hover 在那些导航链接上的任何时候都会横向移动。 I do not want the logo to move at all when the nav-links are being hovered.当导航链接悬停时，我根本不希望徽标移动。 please what should I do?请问我该怎么办？ please help.请帮忙。
2 个解决方案
解决方案1
0 2021-03-06 04:56:04
use min-width in button for movement your logo position when hover在 hover 时使用按钮中的min-width移动您的徽标 position
*{ box-sizing:border-box; } body{ background-color:rgb(139, 200, 50); } nav{ display:flex; justify-content:space-between; } #Logo{ padding:10px; margin:0; border:0; background-color: black; } #button{ align-self:center; } #button a { text-align: center; padding: 10px 30px; border: white solid; border-radius: 30px; cursor: pointer; text-decoration: none; font-family: 'Heebo', sans-serif; color:white; letter-spacing: 1px; transition: 0.8s; } #button a:hover{ color: rgb(139, 200, 50); padding: 15px 35px; letter-spacing: 3px; background-color:#fff; } /*Add this**/ div#button { min-width: 190px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>Treetop</title> </head> <body> <nav > <div id="button"> <a href="">PRODUCTS</a> </div> <div id="logo"> <img src="/img/logo.png" alt="logo"> </div> <div id="button"> <a href="#">CONTACT</a> </div> </nav> <body>
解决方案2
-2 2021-03-06 05:09:50
in your css you have given #Logo instead of在您的 css 中，您给出了 #Logo 而不是
#logo ＃标识
and give position absolute to #logo wherever you want to position it.并将 position 绝对设置为#logo，无论您想在哪里 position 它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.