[英]the letter-spacing used in my hover selector on my nav-links is making my logo shift sideways in my navigation bar
我使用 flexbox 创建了一个传统的导航栏。 导航栏包含 3 个 div。 两个只有一个导航链接，而第三个包含一个图像（徽标）。 3个div水平对齐。 图像在中心我使用 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>
现在，问题是我的图像在 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>
在您的 css 中，您给出了 #Logo 而不是
＃标识
并将 position 绝对设置为#logo，无论您想在哪里 position 它。
使用响应式Nav插件很难将我的导航链接和徽标对齐
[英]Difficulty line up my Navigation Links and Logo with Responsive Nav Plugin
如何使我的徽标 go 向左，我的导航栏图标在中间？
[英]How do I make my logo go towards the left and my nav bar icons in the middle?
如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔符？
[英]How to add a container for a logo and a horizontal divider for my top nav bar in bootstrap?
滚动更改Java滚动条不透明度的Javascript使我的Nav内容消失
[英]Javascript on scroll to change nav bar opacity is making my nav content dissapear
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.