Question

我在这里难过...... 我正试图在每个li上有两条不同线的顶部导航中垂直对齐文本。通常情况下，我会选择位置：relative + position：绝对路线，但只有在设置元素的宽度时才有效。

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

这是我的代码

<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;

}

正如你在第二个li中看到的那样，有一个换行符。我需要的是在底部排列的所有项目，但是，我不能使用width元素。

任何帮助都将受到赞赏... javascript，jquery，也是可接受的替代品。

Answer 1

有关更新的CSS和示例，请参阅http://jsfiddle.net/HKAn2/1/。

通过适当的IE7支持更新了小提琴示例：http://jsfiddle.net/HKAn2/3/。

我不建议在这个小提琴示例中使用CSS hacks。而是使用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 */
}

希望这有帮助。

修改

我应该进一步解释，a元素的height属性不再是必需的。 a将根据具有最大高度的li与li元素的底部对齐。

Answer 2

因为您似乎知道高度（或最佳高度），您可以使用vertical-align specs中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;
}

工作示例：HERE

缺点是我不认为你可以得到整个30px的高度可以徘徊，如果链接是display:block，可能会有人，但是如果需要，可能有人可以扩展这个，也许可以通过增加一个来实现span加入混合？

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

2 个答案:

工作示例：HERE