Css 将最后一个li延伸至ul的剩余宽度，并将其向右对齐

我基本上有一个关于此线程的问题-> 我不确定是否应该回复或创建一个新的线程并引用它

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

原创的

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

使用上面的链接，我成功地使它看起来像这样。到目前为止还不错

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

但是现在我的问题是，最后一个li的内容是左对齐的，但我希望它是右对齐的。 最后一个li包含一个表单输入。我试着使用文本对齐：对，但是没有；似乎没有什么影响。 我不能将最后一个li设置为浮动：对，因为它已经设置为浮动：无以使其宽度为100%，这是我需要的

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

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

这是小提琴：

将最后一个li延伸至ul的剩余宽度，并将其向右对齐

最好的方法是将

li

元素的

显示设置为
表格单元格
。您需要添加
空白：nowrap
，以防止文本换行。将最后一个
li
元素的宽度设置为
100%
，以填充剩余的空间。然后将
input
元素向右浮动


如果希望
input
元素扩展到完整的剩余宽度，而不是向右对齐，只需将其宽度设置为
100%
，而不是浮动


有几种方法可以做到这一点

一种可能的解决方案是使用
display:inline块并将最后一个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;
}

是否要保留菜单的固定1000px宽度？我认为最好使用宽度：100%；是的，你是对的，实际上100%是我在我的现场网站上使用的。由于小盒子的原因，我似乎无法在小提琴上100%演示这个问题。您好，谢谢您的回答，但在小提琴上，整个搜索输入现在似乎是100%。@user3453987 My bad-误解了这个问题。这就是你要找的-
.menu > ul > li:last-child,
.menu > ul > li:last-child input {
    width:100%;
}

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