CODEWITHSUNDEEP
htmlcss
coder
coder

Reputation: 13250

Aligning the first element to the left in a right-aligned navigation menu

I have menu with few unordered list items as shown below.

enter image description here

Now I need home menu to be placed on the left and the rest of the items on the right side. How do I do that? Here is my menu CSS:

.menu{
    position: absolute;
    top:10px;
    left:315px;
    width:920px;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 7px;
    -moz-border-radius : 7px;
    -webkit-border-radius : 7px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
}
.dark {
    background : rgb(89,89,89);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    border: 1px solid #272727;
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;
    text-align: center;
} 
ul li a {
    padding: 0 20px;
    text-align: center;
}

This is how my markup is:

<div class="menu dark">
 <ul >
        <li><a href="">Home</a></li>
        <li><a href="">Item1</a></li>
        <li><a href="">Item2</a></li>
        <li><a href="">Item3</a></li>
        <li><a href="">Item4</a></li>
        <li><a href="">Item5</a></li>
    </ul>
</div>

Upvotes: 2

Views: 3907

Answers (1)

No Results Found
No Results Found

Reputation: 102735

There wasn't enough CSS to fully reproduce your screen shot, but the basic formula should be something like this:

.menu ul {
    text-align:right;
}
.menu li {
    display:inline-block;
}
.menu li:first-child {
    float:left;  
}

Demo: http://jsfiddle.net/TLS3Y/

You could do something with .menu li { float:right; } instead of display:inline-block;, but then the order of your menu items will be reversed.

There's another way you can do it that might actually be a bit more solid, because inline-block can be dicey:

.menu {
    position:relative; /* contain absolutely positioned elements */
}  
.menu ul {
    float:right;
}
.menu li {
    float:left;
}
.menu li:first-child {
    position:absolute;
    left:15px; /* Match your padding on <ul> */
    top:15px;
}

Demo: http://jsfiddle.net/TLS3Y/3/

Upvotes: 3

Related Questions