如何将LI元素定位到UL列表的底部

本文介绍了如何将LI元素定位到UL列表的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有菜单项，如：Row1 Row2 .. RowN，我想让它们不那么宽 - 这就是为什么包括中断（与最大宽度）

有此HTML：

  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列表的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
                        1403页，肝出来的..