Html 如何将 LI 元素定位到 UL 列表的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4510401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I positioning LI elements to the bottom of UL list
提问by PaN1C_Showt1Me
I have menu items like: Row1 Row2.. RowN and I want them not to be that wide - that's why including breaks (with max-width)
我有菜单项，如：Row1 Row2.. RowN，我希望它们不要那么宽 - 这就是为什么包括中断（最大宽度）
I have this HTML:
我有这个 HTML：
<div>
<ul>
<li>Row1</li>
<li>Row1 Row2 Row3</li>
<li>Row1</li>
<li>Row1 Row 2</li>
</ul>
</div>
with this CSS:
使用这个 CSS：
/* MENU */
.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}
ul.menu
{
list-style-type: none;
min-width: 1050px;
position: relative;
left:10px;
display: block;
height: 45px;
margin: 0;
padding: 0;
}
ul.menu li
{
float: left;
margin: 0;
padding: 0;
}
ul.menu li a
{
float: left;
text-decoration: none;
padding: 9px 12px 0;
font-weight: bold;
max-width:130px;
}
Actual:
实际的：
+--------------------+
|Row1 Row1 Row1 Row1 |
| Row2 Row2 |
| Row3 |
+--------------------+
What I need:
我需要的：
+--------------------+
| Row1 |
| Row2 Row1 |
|Row1 Row3 Row1 Row2 |
+--------------------+
采纳答案by RoToRa
Use display: inline-blockinstead of float:
使用display: inline-block代替float：
ul.menu
{
vertical-align: bottom;
}
ul.menu li
{
display: inline-block;
text-align: center;
}
EDIT: Added text-align: center;. If I understand your comment correctly, that is what you want. If not, you'll need to be more specific.
编辑：添加text-align: center;. 如果我正确理解您的评论，那就是您想要的。如果没有，你需要更具体。
回答by Asif Hussain
Assuming that following is your html
假设以下是您的 html
<div>
<ul>
<li><a>Row1</a></li>
<li><a>Row1 Row2 Row3</a></li>
<li><a>Row1</a></li>
<li><a>Row1 Row 2</a></li>
</ul>
</div>
You can simply style your CSS as following
您可以简单地将 CSS 样式设置如下
li {
position:relative;
float:left;
}
li a {
position:absolute;
bottom:0;
}
Above code should work across browsers (I have not tested this across browsers)
上面的代码应该可以跨浏览器工作（我没有跨浏览器测试过）
回答by user466764
http://css-tricks.com/what-is-vertical-align/This link might help, alternatively you could create the result as table based content with the content aligned to the bottom of each cell.
http://css-tricks.com/what-is-vertical-align/此链接可能会有所帮助，或者您可以将结果创建为基于表格的内容，内容与每个单元格的底部对齐。
