Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 844
Kevin M Avatar asked May 08 '14 00:05

Kevin M


People also ask

How do you increase the width of an UL?

You just put width property to ul element.

How do I make a div fill the remaining width?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

How do I move UL to left in HTML?

You can add padding: 0 to the ul element to force it to stick to the left border of the parent nav element.

What is the difference between Li and UL?

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ). In menus and unordered lists, list items are usually displayed using bullet points.


2 Answers

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.

like image 109
Tims Avatar answered Sep 29 '22 03:09

Tims


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%;
}
like image 27
Josh Crozier Avatar answered Sep 29 '22 04:09

Josh Crozier