将最后一个 li 扩展到 ul 的剩余宽度并将其右对齐

Question

我基本上有一个与此线程有关的问题 -> 将最后一个 li 扩展到 ul 的剩余宽度？ 我不确定是否应该回复或创建一个新线程并引用它。

无论如何，我有一个使用 ul 和 li 的导航菜单，如下所示。我的第一个目标是最后一个 li 使用 100% 的剩余 ul 空间，我设法做到了。

原来的

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

使用上面的链接，我设法使看起来像这样。到现在为止还挺好。

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

但是现在我的问题是，最后一个 li 的内容左对齐，但我希望它右对齐。最后一个 li 包含一个表单输入。我尝试使用 text-align:right，但这似乎没有影响。我无法将最后一个 li 设置为 float:right，因为它已经设置为 float:none 以使其宽度为 100%，这是我需要的。

简单来说，如何使最后一个 li 成为剩余空间的 100% 宽度并使内容正确对齐。

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

这是小提琴：http : //jsfiddle.net/K7w9j/

Answer 1

做这件事有很多种方法。

一种可能的解决方案是使用display: inline-block;最后 li 并将其浮动到右侧。我还调整了填充和边距：

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

你更新的小提琴。