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/
You just put width property to ul element.
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.
You can add padding: 0 to the ul element to force it to stick to the left border of the parent nav element.
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.
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.
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%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With