CODEWITHSUNDEEP
htmlcsshtml-listspadding
Sparkles
Sparkles

Reputation: 156

Horizontal Inline List Padding

I've got a horizontal html inline list, which is used for navigation, and I want to remove the padding between the list items. This is because there are images inside each box which need to be touching.

I've tried setting margins/padding to 0 for both the nav container, and the list itself, but it won't work. Can anyone see where I'm going wrong?

HTML:

<div id="navwrapper">
            <ul id="navlist">
                <li><a href="#"><img src="images/nav/about.png" /></a></li>
                <li><a href="#"><img src="images/nav/gigs.png" /></a></li>
                <li><a href="#"><img src="images/nav/music.png" /></a></li>
                <li><a href="#"><img src="images/nav/facebook.png" /></a></li>
            </ul>
        </div>

CSS:

#navwrapper {
width: 100%;
height: 26px;
margin: 0;
padding: 0;
}

#navwrapper ul {
text-align: right;
margin: 0;
padding: 0;
}

#navlist {
height: 26px;
margin: 0;
padding: 0;
}

#navlist li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
}

Thanks!

Sparkles*

Upvotes: 1

Views: 3603

Answers (4)

KushalP
KushalP

Reputation: 11206

You can float the list as required. Here's an example update to the CSS that should work, assuming there's no other issues with the box model:

#navwrapper {
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: right; /* clear the children that are floated right */
}

ul#navlist {
  float: right; /* float all of this to the right */
  list-style: none;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: left; /* clear the children that are floated left */
}

ul#navlist li {
  float: left; /* float the box left, so we can set margin/padding */
  margin: 0;
  padding: 0;
  background-color: #000000;
}

Upvotes: 2

Will Dean
Will Dean

Reputation: 39500

All the modern browsers can help you find this kind of problem via 'inspect element' features. (You'll want the FireBug add-in if you're using Firefox).

The browser will show you what styles are applied to each element, and where the padding comes from.

Getting used to inspecting elements in the browser will be much more useful than getting a lucky guess here from someone about this particular problem.

Upvotes: 1

Dustin Laine
Dustin Laine

Reputation: 38503

float the li's:

http://jsfiddle.net/durilai/g7KRe/

Upvotes: 1

Nick
Nick

Reputation: 478

This is actually because the new lines you have between the <li>'s are being formatted as spaces. Simply put all of those tags in your code on the same line, like so:

<li></li><li></li>

..rather than..

<li></li>
<li></li>

Upvotes: -2

Related Questions