CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-lists
Higeath
Higeath

Reputation: 47

UL LI tags in html create blank space

So I have this ul's li's and nav is changed in css to inline but for some reason when i put those few lines on the top of the page they create blank area like 3-4 lines down which I can't get rid of

<ul id="nav">
<li><span style="position: relative; top: -19px;"><a href="champions.php">Champions</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="items.php">Items</a></span></li>
<li><span style="position: relative; top: -19px;"><a href="changes.php">Changes</a></span></li>
</ul>

Upvotes: 0

Views: 4904

Answers (3)

Robert Messerle
Robert Messerle

Reputation: 3032

Inline content is whitespace-sensitive, so you will have spaces between the element. This is typically why people will use float rather than inline when they want elements to line up next to each other.

Here is a simplified example demonstrating what I think your problem is:

http://jsfiddle.net/rH24P/

I would change this to use float: left instead:

http://jsfiddle.net/rH24P/1/

Updated CSS:

ul {
    list-style: none;
}
li {
    background: #ccc;
    float: left;
}

Upvotes: 2

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93611

First rule of UL/LIs. Get rid of the default formatting:

#nav.ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

JSFiddle to mess around with: http://jsfiddle.net/TrueBlueAussie/4ctUx/

Upvotes: 2

AndrewPolland
AndrewPolland

Reputation: 3071

I think what you're looking for is something like this http://jsfiddle.net/4QR2v/

Remove your inline styling and use the following CSS instead:

#nav{
    margin:0;
    padding:0;
    list-style: none;
}

#nav li{
    display:inline;
}

The margin:0 and padding:0 removes the default formatting on lists (which may be the gap you're referring to). And the display:inline puts everything on one line.

Upvotes: 1

Related Questions