css 和 html 的导航栏问题
[英]navigation bar issues with css and html
问题描述
您好，我的登录和注册按钮导航栏有问题。 如何将注册按钮向右移动？ 更接近？ 另外，关于菜单，output上没有出现hover function？ 我在代码中找不到任何问题。
这是 html 代码：
* { ` margin: 0; padding: 0; box-sizing: border-box; } body { font-family: arvo; font-size: 16px; } a { text-decoration: none; }.logo { cursor: pointer; height: 50px; width: 10%; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 80px; box-shadow: 0 2px 5px #000; width: 100%; height: 60px; background-color: #fff; }.Nav-center { list-style: none; }.Nav-center li { display: inline-block; padding: 0 15px; text-transform: uppercase; }.Nav-center li a { color: #000; display: block; }.Nav-center li a:hover { color: #fff; background-color: #27d05f; transition: all 0.3s ease 0s; }.btn-right { float: right; cursor: pointer; color: #fff; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; padding: 10px 30px; border-radius: 5px; background-color: #27d05f; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <title>Aunty grocery</title> </head> <body> <header> <img class="logo" src="Logo.png" alt="" /> <nav> <ul class="Nav-center"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Grocery</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <a class="btn-right" href="#">Sign Up</a> <a class="btn-right" href="#">Sign In</a> </header> </body> </html>
3 个解决方案
解决方案1
0 2020-04-26 07:33:52
由于您使用的是space-between它以这种方式分隔每个元素。
您可以将两个按钮包装在<div>中，以便将它们视为 header 中的一个元素：
<div>
<a class="btn-right" href="#">Sign Up</a>
<a class="btn-right" href="#">Sign In</a>
</div>
然后您可以为按钮添加边距以在它们之间留出一些空格：
.btn-right {
float: right;
cursor: pointer;
color: #fff;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px 30px;
border-radius: 5px;
background-color: #27d05f;
margin: 0 10px;
}
解决方案2
0 2020-04-26 07:35:52
关于未应用：hover 样式的原因，您的 CSS 的语法有点错误。 应该改为
.Nav-center li a:hover {
color: #fff;
background-color: #27d05f;
transition: all 0.3s ease 0s;
}
注意'a'后面没有空格
解决方案3
0 2020-04-26 07:40:31
您的header元素具有 css 属性justify-content: set to space-between; . 这意味着 header 是一个 flexbox 容器，其中所有元素将均匀分布在“每个元素之间的空间均匀”。
获得所需结果的最佳方法是将两个按钮放在 header （一个div ）内的一个父元素中，然后对右侧的按钮应用一点左边距（ margin-left: 2%;例如）。
将新按钮容器元素的宽度限制为以 %、rem 或 px 为单位的某个 max-width，或者简单地设置width: max-content; .
按钮现在将靠得更近。
保持 justify-content 值不变，以确保右侧按钮浮动到外部页面容器的最右侧。
HTML 或 CSS 导航栏问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.