Reputation: 83

Remove whitespace from li elements

I'm trying to create a simple horizontal nav. I've searched through stack overflow fairly thoroughly and found several answers to how to remove the whitespace between li elements. I've tried adding and removing html elements (writing the li tags in a single line, and adding div tags). I've tried changing the 'display: inline' attribute of my li tags to 'display: block' and 'float: left'. I've also tried several other things as suggested by stack overflow users.

Nothing has worked for me.

I'm sure the solution is simple, but nothing I do seems to work properly. Any help is greatly appreciated.

My html is:

<div class="nav">
<ul>
<li><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>

My CSS is:

.nav {
    height: 56px;
    width: 100%;
    }
.nav ul {
    height: 100%;
    float: right;
    padding: 0px;
    }
.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    display: inline;
    width: 100%;
    padding: 0px;
    }
.nav ul li a {
    color: #333;
    text-transform: none;
    text-decoration: none;
    display: inline-block;
    padding: 0 .5em;
    background: transparent;
    }
.nav ul li a:hover {
    color: #FFF;
    text-transform: none;
    text-decoration: none;
    background: #333;
    }
.active {
    color: #FFF !important;
    background: #333 !important;
    }

Upvotes: 0

Answers (4)

Reinder Wit

Reputation: 6615

make your <li> float left and remove the width:

.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    float: left;
    padding: 0px;
    list-style:none;
}

I also added 'none' for list-style, as the bullets will show again once you remove the display.

I wouldn't use negative margins since the above is a more elegant solution and less confusing. IMHO, negative margins are hacks and should only be used as a last resort...

Here's my fiddle: http://jsfiddle.net/5dBVg/1/

Upvotes: 1

Harish Boke

Reputation: 557

Use float to align element and clear them after your ul here is a working demo http://jsfiddle.net/HarishBoke/dh5eZ/

HTML

<div class="nav">
    <ul class="clearfix">
        <li><a href="#" class="active">One</a>        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</div>

CSS

.nav {
    height: 56px;
    width: 100%;
}
.nav ul {
    height: 100%;
    padding: 0px;
    list-style:none;
}
.nav ul li {
    height: 100%;
    line-height: 56px;
    background: transparent;
    padding: 0px;
    float:left;
    background:#ccc;
}
.nav ul li a {
    color: #333;
    text-transform: none;
    text-decoration: none;
    display: inline-block;
    padding: 0 .5em;
    background: transparent;
}
.nav ul li a:hover {
    color: #FFF;
    text-transform: none;
    text-decoration: none;
    background: #333;
}
.active {
    color: #FFF !important;
    background: #333 !important;
}
.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}

Upvotes: 1