Question

我基本上对这个帖子有一个问题 - ＆gt; Extend last li to remaining width of a ul? 我不确定我是否应该回复或创建新帖子并引用它。

无论如何，我有一个使用ul和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;并向右浮动最后一个。我也调整了填充和边距：

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

Answer 2

将最后一个li延伸到ul的剩余宽度并将其对齐。

最好的方法是将display元素的li设置为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%而不是浮动它。 / p>

Example Here

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

将最后一个li延伸到ul的剩余宽度并将其对齐

2 个答案: