如何将LI元素定位到UL列表的底部 [英] How can I positioning LI elements to the bottom of UL list

问题描述

我有菜单项，如：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屋！