Question

我有菜单项，如：Row1 Row2 .. RowN，我希望它们不要那么宽 - 这就是包含中断（最大宽度）的原因

我有这个HTML：

<div>
 <ul>
  <li>Row1</li>
  <li>Row1 Row2 Row3</li>
  <li>Row1</li>
  <li>Row1 Row 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 |
+--------------------+

Answer 1

使用display: inline-block代替float：

ul.menu
{                 
   vertical-align: bottom;
}

ul.menu li
{    
   display: inline-block;
   text-align: center;
}

编辑：添加了text-align: center;。如果我理解你的评论，那就是你想要的。如果没有，你需要更加具体。

Answer 2

http://css-tricks.com/what-is-vertical-align/ 此链接可能会有所帮助，您也可以将结果创建为基于表格的内容，其内容与每个单元格的底部对齐。

Answer 3

假设以下是你的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>

您可以按照以下方式设置CSS的样式

li {
    position:relative;
    float:left;       
}

li a {
    position:absolute;
    bottom:0;
}

上面的代码应该适用于各种浏览器（我没有在浏览器中测试过）

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

3 个答案: