纯CSS解决方案

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

我尝试了以下内容：我想到的浮动和内联块的许多组合/将ul显示为表格，将每个li显示为表格单元格/使用相对和绝对定位来尝试填充每个空格< / p>

其他说明：正如我上面提到的，我无法定义高度，因为我不知道会有多少行/我很确定我必须支持叹息 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，但您当然可以使用其他库）。策略很简单：

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

在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

您使用a {display: block;}进入了正确的轨道。除此之外，您还需要将填充从li切换到li a（仅使用a会将其应用于页面上的所有链接，而不仅仅是列表中的链接）：< / p>

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

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

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

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

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

Answer 4

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 */
}

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

4 个答案:

纯CSS解决方案

基于JS的解决方案