Extend the last li to the remaining ul width and align it to the right

Question

I basically have a question in relation to this topic → Extend the last li to the remaining ul width? I was not sure that I should respond or make a new thread and refer to it.

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

Original

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

Using the link above, I managed to do so. So far so good.

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

, li , , . li . text-align: right, . li float: , float: none, 100%, .

, 100% .

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

: http://jsfiddle.net/K7w9j/

Answer 1

.

display: inline-block; . :

.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;
}

.

Answer 2

li ul .

display li table-cell. white-space:nowrap, . li 100%, . input .

.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;
}

, input , , , 100%, .

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