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

Question

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

我正在尝试为水平选项卡式导航设置样式。但是，在它的使用中，我需要它来容纳不同长度的链接，这些链接可能会使任何 li 换行到多行。但是当它这样做时，其他链接不会填充 100% 的高度。

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

如您所见，链接 2 较高并且会环绕 - 因此链接 1、3 和 4 不会填充该空间。在此示例中，其中一个链接包含两行，但实际上它们可能包含三或四行等，因此我无法定义高度。如何获得所有其他链接来填充该空间？ （不仅仅是背景颜色）

这是我精简的 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; }

我尝试了以下方法：我能想到的浮点数和内联块的组合/将 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，并垂直拉伸所有子项 (align-items: stretch)
• 也将<li> 设置为显示 flex，这样我们就可以强制它的内部子元素也垂直拉伸。
• 将<a> 设置为flex: 1 1 auto，使其自动增长和收缩。宽度可以是auto 或100%，在这种情况下没有关系。

这里是小提琴：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));

但是，您应该注意，每当更改链接的尺寸时，都必须重新运行这几行脚本，从而影响高度。

见小提琴：http://jsfiddle.net/teddyrised/qL47V/9/

Answer 2

我假设当您说您希望链接填充该空间时，您的意思是您希望背景填充整个空间。话虽如此，您可以通过以下方式做到这一点：

ul {
  display: table;
}
li {
  display: table-cell;
  background-color: #ccc;
  vertical-align: bottom;
}

小提琴：http://jsfiddle.net/qL47V/3/

如您所见，如果您将背景放在列表项（设置为display: table-cell）上，它将填满整个空间。

可能有更好的方法来做到这一点（我个人讨厌把东西设计成表格），但这会让你到达你需要去的地方。

Answer 3

Demo

ul, li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul {
    border-bottom: solid 1px #000;
}
li {
    display: table-cell;           /* Make all <li> have same height */
    width: 120px;
    border-right: 10px solid #fff; /* Fake right-margin */
    text-align: center;
    background-color: #ccc; 
    vertical-align: bottom;        /* Align anchors to bottom */
    overflow: hidden;              /* Hide overflow caused by huge anchors */
}
a {
    display: block;
    padding-top: 100000px;         /* Make anchors huge to be sure 
                                      they cover <li> completely */
    margin-top: -100000px;         /* Place them correctly */
}

Answer 4

a {display: block;} 让您走在正确的轨道上。除此之外，您需要将填充从li 切换到li a（仅使用a 会应用页面上的所有链接，而不仅仅是列表中的链接）：

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

li a {
    display: block;
    background-color: #ccc;
    padding: 1em;
}

这将使a 的属性填充父li 元素。

至于您的第二个请求，您不能将 vertical-align 与 block level 元素一起使用。这就是为什么这里的其他答案将display 样式设置为display: table; 和display: table-cell;。数据是不是表格的，因此请记住表格不是实现您想要的最佳方式。另请记住，此方法可能不适用于 IE8。但是，有时实际上胜过标准合规性，因此您可以实现自己想要的。

Douglas Heriot 写了一篇关于如何在块级元素中实现垂直对齐的博文，如果您有时间和意愿阅读它。