Navigation Bar has extra space on the right side
Question
I am currently creating my first website and I created a navigation bar. But I have noticed that there is some extra space on the right side of the bar. So when I highlight over the last thing on my bar there is a little bit of space that does not change colors (when I hover over things on the tab it changes the background color). So I was wondering if anyone has a solution to this problem?
ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; overflow: hidden; background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; width: 742px; } ul.tab li { float: left; padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 64px; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </body> </html>
4 answers
solution1
0 2017-01-07 01:09:19
You've set the width of your nav bar to 742px. The combined width of all your items (your li's) doesn't add up enough to fill the whole bar.
Try:
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 items at 25% total 100% of the container.
solution2
0 2017-01-07 01:13:58
The width of the nav bar is greater than the width of then nav items. Unless you declare a hard width on the items that adds up to the same as the width of the nav bar, you shouldn't use a fixed width.
What I would do is change ul.tab to be display:inline-block; so that it will only take up as much space as needed and will shrink to match the size of it's direct descendents, and add text-align: center; to that element's parent ( body in this case) to center the element.
Here's a demo - http://codepen.io/anon/pen/JEdywM
solution3
0 ACCPTED 2017-01-07 01:15:05
Give flexbox a try.
display: flex on the ul , and flex: 1 on the li :
To align the dropdown menu with the button, relative position the button, 100% width on the dropdown div, and remove overflow hidden from the ul
Also, you don't need to add left and right padding to the a elements because you display them as block.
ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; /*overflow: hidden;*/ background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; width: 742px; display: flex; } ul.tab li { flex: 1; /*float: left;*/ padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 0; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; position: relative; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 0; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </body> </html>
solution4
0 2017-01-07 01:16:32
Your li elements all have dynamic widths which are rendered as float values for the pixels and eventually rounded to full pixels. That's where that margin comes from. To prevent that:
In the CSS rule for ul.tab remove the width setting alltogether and add display: inline-block; .
PLUS: Wrap the ul in a container div which has text-align: center :
(view the snippet in full page mode to see the result)
.listcontainer { text-align: center; } ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; overflow: hidden; background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; display: inline-block; } ul.tab li { float: left; padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 64px; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <div class="listcontainer"> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </div> </body> </html>
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.