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

【问题标题】：Extend last li to remaining width of a ul and align it right将最后一个 li 扩展到 ul 的剩余宽度并右对齐
【发布时间】：2014-06-25 04:51:36
【问题描述】：

我基本上有一个关于这个线程的问题 -> Extend last li to remaining width of a 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/

【问题讨论】：

您想为菜单保留固定的 1000px 宽度吗？我认为最好使用 width: 100%;
是的，你是对的，实际上 100% 是我在我的现场网站上使用的。由于小盒子，似乎真的无法以 100% 的方式展示问题。

标签： css html-lists css-selectors

【解决方案1】：

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

最好的方法是将li 元素的display 设置为table-cell。您需要添加white-space:nowrap 以防止文本换行。将最后一个 li 元素的宽度设置为 100% 以填充剩余空间。然后将input 元素向右浮动。

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

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

Example Here

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

【讨论】：

您好，感谢您的回答，但在小提琴上，似乎整个搜索输入现在是 100%。
@user3453987 我的错 - 误解了这个问题。这就是你要找的 - jsfiddle.net/23kYs

【解决方案2】：

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

一种可能的解决方案是使用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;
}

Your updated fiddle.

【讨论】：