CODEWITHSUNDEEP
htmlcss
Max
Max

Reputation: 887

Better method than float:right in navigation bar?

I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).

My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.

Upvotes: 0

Views: 126

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

You must define text-align: right for the containing element

HTML:

<ul class="nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed

HTML:

<ul class="nav left-nav">
    <li class="menu">1</li>
    <li class="menu">2</li>
    <li class="menu">3</li>
</ul>
<ul class="nav right-nav">
    <li class="menu">4</li>
    <li class="menu">5</li>
</ul>

CSS:

.nav {
    margin: 0;
    padding: 0;
}

.left-nav {
    text-align: left;
}

.right-nav {
    text-align: right;
}

.menu {
    display: inline;
}

JSFiddle

Upvotes: 1

Sergio Wizenfeld
Sergio Wizenfeld

Reputation: 492

Here you go i think this is what you are looking for:

jsfiddle.net/Sdw5h/

Upvotes: 0

Related Questions