表格单元内块元素的完整可点击区域和垂直对齐答案

【问题标题】：Full clickable area and vertical alignment of block element inside a table-cell表格单元内块元素的完整可点击区域和垂直对齐
【发布时间】：2017-03-06 07:04:10
【问题描述】：

有一个简单的问题，我需要一个表格单元格内的显示块元素来获取单元格的全部可用高度和宽度，同时文本也垂直对齐。

Fiddle Demo

ul {
  background: yellow;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 48px;
}

a {
  display: block;
  width: 100%;
  height: 48px;
}

a:hover {
  background: red
}

<ul>
  <li>
    <a href="#">Item1</a>
  </li>
  <li>
    <a href="#">Item2</a>
  </li>
  <li>
    <a href="#">Item3</a>
  </li>
  <li>
    <a href="#">Item4</a>
  </li>
  <li>
    <a href="#">Item5</a>
  </li>
</ul>

所有的东西都需要响应，所以如果文本下降到 2 行并且列表元素的数量是灵活的，所以没有行高修复，这就是我使用 display:table 的原因。但是，如果可以实现这一点，对另一种方法感到满意，由于某种原因，我无法弄清楚如何在这种情况下垂直对齐文本

【问题讨论】：

如果你在 li 标签中有固定的高度，你可以使用`line-heigth:48px`作为标签
如前所述，如果文本较长且落在 2 行上，这不是解决方案

标签： html css

【解决方案1】：

使用 Flexbox 您可以将其归档：

ul {
  background: yellow;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  list-style:none;
  padding:0;
  margin:0;
  align-item:center;
}

li {  
  text-align: center;
  vertical-align: middle;    
  /*width:20%;*/
  display:flex;
  flex-direction:column;
  flex: 1 0 auto;
}

a {           
  padding:10px 0;
  display:flex;
  flex-direction:column;
  flex: 1 0 auto;
  justify-content: center;
}

a:hover {
  background: red
}

<ul>
  <li>
    <a href="#">Item1</a>
  </li>
  <li>
    <a href="#">Item2</a>
  </li>
  <li>
    <a href="#">Item3</a>
  </li>
  <li>
    <a href="#" >Item4 with very very long long long text</a>
  </li>
  <li>
    <a href="#" >Item5</a>
  </li>
  <li>
    <a href="#" >Item6</a>
  </li>
  <li>
    <a href="#" >Item7</a>
  </li>
</ul>

【讨论】：

我使用显示表的原因是因为它让我可以灵活地拥有尽可能多的列表项。有没有办法让我用 flexbox 做到这一点？基本上不想要宽度：20%
是的，您可以从 li 和更多列表项中删除固定宽度...更新我的答案
但是，如果您将我的 sn-p 与您的进行比较，您会注意到我的显示效果如何：无论有多少文本，表格中的列表项都在平均占用空间，因为我没有两行文字出现问题

【解决方案2】：

您的代码完全正确。但是正确 vertical-align: middle; 仅删除样式 height: 48px; inside a tag强>
和 li:hover 样式替换为a:hover

Revise Fiddle

更新样式

a {
    display: block;
    width: 100%;
    word-break: break-all;
 }

ul {
  background: yellow;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 48px;
}

a {
  display: block;
  width: 100%;   
  word-break: break-all;
}

li:hover {
  background: red
}

<ul>
  <li>
    <a href="#">Item1</a>
  </li>
  <li>
    <a href="#">Item2 Text isveryveryveryvery longer</a>
  </li>
  <li>
    <a href="#">Item3</a>
  </li>
  <li>
    <a href="#">Item4</a>
  </li>
  <li>
    <a href="#">Item5</a>
  </li>
</ul>

【讨论】：

谢谢，但如果文本较长并且落在 2 行上，这似乎不起作用
你想要的文字更长然后显示2行吗？？
我更新了我的答案。检查一下。如果文本很长，则显示 2 行并垂直正确显示中间。任何其他评论我都会解决它
不幸的是，可点击区域只占用了整个宽度而不是高度，它在视觉上看起来都是可点击的，因为您将悬停移动到列表元素
如果可点击区域已满，则添加height:100%和padding:12px 0px

【解决方案3】：

最后我以这种方式完成并满足我的要求

演示： http://codepen.io/anon/pen/RpGPyO

HTML：

<ul>
  <li>
    <a href="#">Item1</a>
  </li>
  <li>
    <a href="#">Item2 or something longer</a>
  </li>
  <li>
    <a href="#">Item3</a>
  </li>
  <li>
    <a href="#" >Item4</a>
  </li>
  <li>
    <a href="#" >Item5</a>
  </li>
</ul>

CSS：

ul {
  background: yellow;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 48px;
  position: relative;
  z-index: 1;
}

a {
  display: block;
  width: 100%;
}

a:before {
  content:'';
  display: block;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;      
  z-index: -1;
  width:100%;
}

a:hover:before {
  background: red;
}

【讨论】：