再次高度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（table-cell）的整个空间。而这正是我已经砸了好几天了。这是我最近的写作：

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

但是a仍然没有填补空间！

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

有什么好主意吗？谢谢！

重要编辑：我还需要垂直居中的文字。

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

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

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

Answer 1

显示：弯曲;可能是年轻浏览器的一种方式。的 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几乎在每个级别上都有利于其特殊性：拉伸元素以适应所有空间或将其缩小到margin:auto以居中和放大中间。

---

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

Answer 2

您可以让a元素设置整个菜单的高度，让其他元素适应它，这是一个演示：http://jsfiddle.net/d6rkR/

ul{
    display: table;
    table-layout: fixed;
    width: 100%
}
li{
    display: table-cell;
    text-align: center;
}
a{
    display: block;
    line-height: 60px;
}

Answer 3

正如@GCyrillus指出display:flex可能是一个合适的解决方案，这里的版本并没有改变原始标记（仅在Chrome上测试）：http://jsfiddle.net/d6rkR/1/

ul{
    display: flex;
}
li{
    flex: 1;
    display: flex;
    flex-direction: column;
}
a{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}