垂直底部对齐文本 - 绝对定位，不知道宽度

Question

我卡在这里了... 我正在尝试垂直对齐具有每个li两行不同文本的顶部导航中的文本。 通常，我会采用position:relative + position:absolute方法，但是只有在设置元素宽度时才有效。

在我的导航中，我们没有标准宽度，但需要通过底部文本对齐所有项目。

这是我的代码

<div id="menu">
 <ul>
  <li><a href="#">first line</a></li>
  <li><a href="#">Second<br />Line</a></li>
  <li><a href="#">third Line</a></li>
 </ul>
</div>

这是我使用的CSS样式：

#menu {
    margin: 40px auto 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #666666;
    float: right;
    width:600px;
}

#menu ul {
    list-style:none;
    list-style-type:none;
    height:30px;
}

#menu ul li {
    float:left;
    margin:0 11px;
    padding:5px 0;

}

#menu ul li a {
    color:#666666;
    text-align:center;
    font-size:11px;
    display:block;
    line-height:1em;
    height:30px;

}

如您在第二个列表项中所见，存在一个换行符。 我需要的是所有项目都对齐在底部，但我不能使用宽度元素。

任何帮助将不胜感激... JavaScript、jQuery也是可接受的替代方案。

- Troy

Answer 1

请查看更新后的CSS样式和样例，网址为：http://jsfiddle.net/HKAn2/1/。

更新后的样例已经正确支持IE7，网址为：http://jsfiddle.net/HKAn2/3/。

我不建议使用此示例中的CSS hack。相反，您应该使用针对IE7的特定样式表来添加星号属性。这只是一个样例。

请注意所做的更改。

#menu ul li {
    display:inline-block; /* this */
    margin:0 11px;
    padding:5px 0;
    *display:inline; /* this  - IE7 */
    *zoom:1; /* this - IE7 */
}

并且

#menu ul li a {
    color:#666666;
    text-align:center;
    font-size:11px;
    line-height:1em;
    vertical-align:bottom; /* this */
}

希望这能帮到您。

编辑：我应该进一步解释，您的元素上的高度属性不再是必需的。根据具有最大高度的

元素，将与

底部对齐。

- Syri

---

这在IE7上不太管用，a上仍然有一个错误的display:block，li上的inline-block hack也不完全正确，但可以解决。点此查看refiddle。希望有所帮助。 - clairesuzy

@claire 您说得完全正确。我会使用您的更正更新帖子。 - Syri

Answer 2

由于您似乎知道高度（或最佳高度），因此您可以使用来自垂直对齐规范的vertical-align的长度值：

<length>

通过此距离提高（正值）或降低（负值）框。 值“0cm”表示与“基线”相同

如果将您的<a>元素转换为内联块，则可以将它们下移一半的高度，例如以下示例中，我使用了您的高度值30px，并使链接每行具有15px的行高，然后将其下移15px，这是从默认中点下移15px。

#menu {
    margin: 40px auto 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-variant: normal;
    color: #666666;
    float: right;
    width:600px;
    background: #eee;
}

#menu ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float: left;
    margin: 0 11px;
    height: 30px;
    background: #dad;
}

#menu ul li a {
    color:#666666;
    text-align:center;
    display: inline-block;
    vertical-align: -15px;  
    line-height: 15px;
}

工作示例：这里

缺点是，我认为您无法使整个30px高度可悬停，就像链接是display:block一样，但如果需要，也许有人可以扩展此功能，也许可以通过添加一个span来实现？

- clairesuzy