Home/ Questions/Q 923091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T19:08:20+00:00

Have a Navbar <div> , inside is a <ul> and each <li> contains a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This allows a widthless centered dynamic ul if you don’t want to specify 90% width:

    <!doctype html>
<div class="navbar">
    <div id="for-ie">
        <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>
</div>
<style>
.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: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

    Tested in IE6, FX 3.

    EDIT: Alternate style without the extraneous element:

    <!doctype 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>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->
    • 0