Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
I looked on Google and this site and I couldn't find exactly what I was looking for.
What I want is to be able to keep my current style (using <li> with <a>'s inside), and I want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
Anyways, if that doesn't make sense let me know, currently they are just left aligned...here's what I have:
HTML:
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
I can also include my .navbar a{} if that is necessary.
I am very new to CSS so go easy, also I did look all over SO and Google first and couldn't find anything quite like this (although maybe since I am new I don't realize it's the same).
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this, go ahead and link/post that instead, but I would prefer this way as it makes most sense to me.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
