如何将LI元素定位到UL列表的底部 [英] How can I positioning LI elements to the bottom of UL list
本文介绍了如何将LI元素定位到UL列表的底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有菜单项,如:Row1 Row2 .. RowN,我想让它们不那么宽 - 这就是为什么包括中断(与最大宽度)
有此HTML:
< div>
< ul>
< li> Row1< / li>
< li> Row1 Row2 Row3< / li>
< li> Row1< / li>
< li> Row1第2行< / li>
< / ul>
< / div>
使用此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;
}
实际:
+ -------------------- +
| Row1 Row1 Row1 Row1 |
| Row2 Row2 |
| Row3 |
+ -------------------- +
我需要:
+ ---------------- ---- +
| Row1 |
| Row2 Row1 |
| Row1 Row3 Row1 Row2 |
+ -------------------- +
c> c>使用
display:inline-block
: ul.menu
{
vertical-align:bottom;
}
ul.menu li
{
display:inline-block;
text-align:center;
}
编辑:添加 text-align:center; / code>。如果我理解你的意见,正确,这是你想要的。如果没有,您需要更具体。
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)
I have this HTML:
<div>
<ul>
<li>Row1</li>
<li>Row1 Row2 Row3</li>
<li>Row1</li>
<li>Row1 Row 2</li>
</ul>
</div>
with this 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 |
+--------------------+
解决方案
Use display: inline-block
instead of 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.
这篇关于如何将LI元素定位到UL列表的底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文