Good evening everyone,
I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'float: left', there are gaps but the menu remains centered. Can anyone offer assistance with this? Thank you!
Here are my CSS codes:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
Here is a snippet of my HTML code:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Crawler</a></li>
<li><a href="#">Visual Analytics</a></li>
</ul>
</div>
Thank you for your help!