css - 再次高度100%

Question

注意:我已经阅读了很多文章，但仍然找不到优雅的解决方案...请帮忙。我有以下菜单代码:

<ul id="xx">
 <li><a href="href1">Link1</a></li>
 <li><a href="href2">Link2</a></li>
 <li><a href="href3">Link3</a></li>
 ...
 <li><a href="hrefn">Linkn</a></li>
</ul>

这显示时没有任何 CSS，只是链接的元素符号列表。那挺好的。现在我想使用 CSS，并具有以下布局:整个 ul 是水平条，li 是条中的单元格，链接占据该条中的整个单元格。太棒了，我用

#xx {margin:0px;padding:0px;text-align:center;display:table;width:100%}
#xx li{padding:1px;list-style-type:none;display:table-cell;border-left:2px solid white;vertical-align:middle}

这给了我表格。出色的。现在我想要一个元素占据 li (表格单元格)的整个空间。这就是我几天来一直在思考的问题。这是我的最新作品:

#xx a{display:block;color:white;text-decoration:none;width:100%;height:100%;background-color:blue;vertical-align:middle;}

但是 a 仍然没有填满空格!

我尝试了相对位置/绝对位置 - 不起作用，而且有缺陷。在 a 中添加另一个 span 或 div 是愚蠢的。

有什么好主意吗？谢谢!

重要编辑:我还需要 a 中的文本垂直居中。

另一个编辑:高度是动态的，基于元素的内容。

另一个编辑 1:需要 IE 支持。

另一个编辑 2:a 与父元素 (li) 具有相同高度和宽度的目的是通过 a 的 href 可以点击整个区域。

Answer 1

显示: flex ；可能是年轻浏览器的一种方式。 <强> DEMO

您需要一个额外的标记来使链接中的文本居中/居中。HTML 测试库:

<ul>
  <li>
    <a href="href1">
      <span>Link1</span>
    </a>
  </li>
  <li>
    <a href="href2">
      <span>Link2</span>
    </a>
  </li>
  <li>
    <a href="href3">
      <span>Link3 
        <br/> 
        line 2
      </span>
    </a>
  </li>
  <li>
    <a href="hrefn"><span>Link4</span>
    </a>
  </li>
</ul>

和CSS基础:

ul {
  width:100%;
  display:flex;/* defaut display in rows */
  background:red; /* will you see it ? */
  padding:0;
}
li {
  display:flex;/* so <a> strectch/expand */
  flex:1;/* all even sized */
  border-left:2px solid white;
}
ul li a { 
  display:flex;/* again, to use margin auto to center child in middle center */
  flex:1;
  background:gray;
}
ul li a span {
  margin:auto;/* let me center middle myseldf */
  display:block;/* i need to be a block to be centered via margin:auto; */
}

通知 display:flex几乎在每个级别上都使用它来增强其特殊性:拉伸(stretch)元素以适应所有空间或将其缩小 margin:auto到中心和中间。

---

对于较旧的浏览器，您可以使用 display:table 作为 CSS 后备元素和伪元素来增加可单击链接的区域:http://codepen.io/gc-nomade/pen/Lusnd/