3

如何在“Bar”和“Baz”之间垂直对齐“Foo”,因为它在没有锚的情况下自动对齐?我不能使用line-height hack,因为我想让链接文本显着扩展单元格。

<table>
  <tr>
    <td class="link-wrap">
       <a class="link" href="#">
         Foo
       </a>
    </td>
   <td>Bar<br>Baz</td>
  </tr>
</table>

CSS:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
}

.link-wrap {
  height: 100%;
}

.link {
  display: block;
  background: #afa;
  height: 100%;
}

沙盒

4

1 回答 1

3

你要这个?jsbin 1

解决方案很简单:不要使用display: block带有高度的 a 。高度是这里的问题。

当您想将颜色应用于整个 td 时,请将颜色也应用于 td 而不是内部元素。


更新jsbin 2

只是一些魔法。我所做的是<a>在表格中转换标签(使用 css;因此它具有所有属性),并且我在<span>其中创建了一个vertical-align: middle;display: table-cell;。所以它基本上是一张桌子。因此,伪表是<a>: 在其所有空间中可点击的。

于 2013-05-13T15:46:49.230 回答