html - 具有不同 <li> 高度的内联导航中的 100% 高度链接

Question

第一次来电，长期倾听......

我正在尝试为水平标签式导航设置样式。然而，在它的使用中，我需要它来适应不同长度的链接，这些链接可能会使任何 li 换行到多行。但是当它出现时，其他链接不会填充 100% 高度。

这是一个 jsfiddle 示例:http://jsfiddle.net/Rothgarr/qL47V/

如您所见，链接二更高并且它环绕 - 因此链接一、三和四不会填满该空间。在此示例中，其中一个链接换行为两行，但实际上它们可能换行为三行或四行，等等，因此我无法定义高度。我如何获得所有其他链接来填充该空间？ (不只是背景颜色)

这是我精简的 html:

<ul>
    <li><a href="#">This is item one</a></li>
    <li><a href="#">This is item two it's very long</a></li>
    <li><a href="#">This is item three</a></li>
    <li><a href="#">This is item four</a></li>
</ul>

这是我精简的 CSS:

ul, li {
margin: 0px;
padding: 0px;
list-style: none;}

ul {
border-bottom: solid 1px #000;
overflow: hidden;}

li {
float: left;
width: 120px;
margin-right: 10px;
text-align: center;}

a {
display: block;
background-color: #ccc; }

我尝试了以下方法:尽我所能组合 float 和内联 block /将 ul 显示为表格，将每个 li 显示为表格单元格/使用相对和绝对定位来尝试填充每个空间

其他注意事项:正如我上面提到的，我无法定义高度，因为我不知道会有多少行/我很确定我必须支持 sigh IE8

有什么想法吗？奖励积分:如何让较短的链接与底部对齐？

Answer 1

纯 CSS 解决方案

如果您喜欢冒险，可以随时尝试 CSS flexbox:它专为此类布局而设计，传统 CSS 方法难以实现。但是，它不适用于旧浏览器，只能用于现代浏览器。

ul, li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul {
    border-bottom: solid 1px #000;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

li {
    display: flex;
    align-items: stretch;
    width: 120px;
    margin-right: 10px;
    text-align: center;
}

a {
    display: block;
    flex: 1 1 auto;
    background-color: #ccc; 
}

我的代码背后的解释:

• 设置<ul>显示 flex，并垂直拉伸(stretch)所有 child (align-items: stretch)
• 设置<li>也显示 flex — 这样我们就可以强制它的内部 child 也垂直拉伸(stretch)。
• 设置<a>至 flex: 1 1 auto ，这样它就会自动增长和收缩。宽度可以是auto或 100% , 在这种情况下没关系。

这是 fiddle :http://jsfiddle.net/teddyrised/qL47V/7/

基于JS的解决方案

你也可以使用基于 JS 的解决方案(我用过 jQuery，但你当然可以使用其他库)。策略很简单:

1. 获取列表中链接的原始高度
2. 找到最大值，并将其分配给所有链接

这在用 jQuery 编写时相当简单:

var heights = [];
$('ul a').each(function() {
    heights.push($(this).height());
}).height(Math.max.apply(Math,heights));

但是，您应该注意，只要链接的尺寸发生变化，这会影响高度，就必须重新运行这几行脚本。

参见 fiddle :http://jsfiddle.net/teddyrised/qL47V/9/