Extend last li to remaining width of a ul and align it right

Question

I basically have a question in relation to this thread -> Extend last li to remaining width of a ul? I wasn't sure if I should reply or make a new thread and reference it.

Anyway, I have a navigation menu using ul and li like below. My first goal was the last li uses 100% of the remaining ul space, which I managed to do.

Original

-------------------------------------------------------------------------------
|                   |                  |                     |
|       Item 1      |      Item 2      |      Search Box     |
|                   |                  |                     |
-------------------------------------------------------------------------------

Using the above link, I managed to make look like this. So far so good.

-------------------------------------------------------------------------------
|                   |                  |                                      |
|       Item 1      |      Item 2      |  Search Box                          |
|                   |                  |                                      |
-------------------------------------------------------------------------------

However now my problem is, the content of the last li is left align but I want it to be right aligned. The last li contains a form input. I tried using text-align:right, but that doesn;t seem to have an affect. I can't set the last li to float:right, because it's already set to float:none to make it width 100%, which I require.

In simple terms, how to I make the last li be 100% width of the remaining space and have the content be aligned right.

-------------------------------------------------------------------------------
|                   |                  |                                      |
|       Item 1      |      Item 2      |                          Search Box  |
|                   |                  |                                      |
-------------------------------------------------------------------------------

Here is the fiddle: http://jsfiddle.net/K7w9j/

Slaughter

do you want to retain the fixed 1000px width for the menu? i think it is better to use width: 100%; – Fervency

Yes, you're right, actually 100% is what I use on my live site. Just didnt really seem to be able to demonstrate the issue in the fiddle with 100% due to the small box. – Slaughter

Answer 1

There are several ways to do this.

One possible solution is to use display: inline-block; and float the last li right. I have also adjusted padding and margins:

.menu {
    color:#FFF;
    width:100%;
    background-color:#000;
}

.menu > ul {
    display: inline-block;
    width:100%;
    padding:5px 0;
    margin:0;
}
.menu > ul > li {
    list-style:inside none;
    float:left;
    border-right:1px solid #FFF;
    padding: 0 5px;
}

.menu > ul > li:last-child{
    float:right;
    overflow:hidden;
    border-right:none;
}

Your updated fiddle.

Tommi

Answer 2

Extend last li to remaining width of a ul and align it right.

The best approach would be to set the display of the li elements to table-cell. You will need to add white-space:nowrap to prevent the text from wrapping. Give the last li element a width of 100% in order to fill the remaining space. Then just float the input element to the right.

Updated Example

.menu > ul > li {
    display:table-cell;
    border-right:1px solid #FFF;
    white-space:nowrap;
}
.menu > ul > li:last-child {
    width:100%;
}
.menu > ul > li:last-child input {
    float:right;
}

If you want the input element to extend to the full, remaining width as opposed to being aligned to the right, you would simply give it a width of 100% as opposed to floating it.

Example Here

.menu > ul > li:last-child,
.menu > ul > li:last-child input {
    width:100%;
}

Campuzano

Hi thanks for the answer, but on the fiddle it seems that the entire search input is now 100%. – Slaughter

@user3453987 My bad - misunderstood the question. This is what you're looking for - jsfiddle.net/23kYs – Campuzano