Question

Good evening,

I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a ‘float:left’. however, this would result in the navigation bar being flushed to the left. without ‘float:left’, there will be gaps yet centralised. would appreciate if someone could help me out. thank you!

my css codes are as follow:

#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;
}

following is my partial 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>

Cheers,
ZH

Answer 1

Here is working code:

http://jsfiddle.net/surendraVsingh/vU4C8/1/

Changes to be done in CSS:

#nav ul {
 list-style-type: none;
 padding: 0;
 display:inline-block; /* Add This*/
}

Note: display:inline-block is added so that ul will only take width according to its li’s unlike other block elements which take 100% width.