将最后一个 li 扩展到 ul 的剩余宽度并右对齐
Posted
技术标签:
【中文标题】将最后一个 li 扩展到 ul 的剩余宽度并右对齐【英文标题】:Extend last li to remaining width of a ul and align it right 【发布时间】: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% 的方式展示问题。 【参考方案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.
【讨论】:
以上是关于将最后一个 li 扩展到 ul 的剩余宽度并右对齐的主要内容,如果未能解决你的问题,请参考以下文章