navigation bar issues with css and html
Question
Hi, I have a problem with the navigation bar of the sign in and sign up button . How to move sign up button to the right? More closer? Besides, about the menu, it doesn't appear the hover function on the output? I can't find any problems in the code.
this is the html code:
* { ` 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 answers
solution1
0 2020-04-26 07:33:52
Since you are using space-between it spaces out each element in this way.
What you could so is wrap the two buttons in a <div> so that they are treated as one element in the header:
<div>
<a class="btn-right" href="#">Sign Up</a>
<a class="btn-right" href="#">Sign In</a>
</div>
Then you can add a margin to the buttons to have some whitespace between them:
.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;
}
solution2
0 2020-04-26 07:35:52
In regards to the reason that the:hover style is not being applied, you have the syntax a bit wrong in your CSS. It should be changed to
.Nav-center li a:hover {
color: #fff;
background-color: #27d05f;
transition: all 0.3s ease 0s;
}
Notice there is no space after the 'a'
solution3
0 2020-04-26 07:40:31
Your header element has the css property justify-content: set to space-between; . This means the header is a flexbox container in which all elements will be spread out evenly with "even space between each element".
The best way to obtain the result you're after is to put both the buttons in one single parent element within the header (a div ), and then apply a little left margin to the button to the right ( margin-left: 2%; for example).
Limit the width of the new button container element to a certain max-width in %, rem or px, or simply set width: max-content; .
The buttons will now be closer together.
Keep the justify-content value like it is, to assure that the right button floats to the far right side of the outer page container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.