css - 在嵌套元素上显示表格单元格？

Question

是否可以将 table-cell 应用于嵌套元素？

在下面的代码中，我将显示表应用于 ul。为了保持我的代码干净(在我的实际代码中有许多覆盖需要考虑，下面的示例是简化的)最好是我可以直接定位链接而忘记列表项。这可能吗？

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

ul {  
  display: table;
  width: 100%;
}

/* This works when uncommented
li {
  display: table-cell;
}
*/

/* This doesnt work */
a {
  display: table-cell;
}

http://codepen.io/pen/

Answer 1

根据@Pete 的评论，这意味着 a 本身就是一个表格单元格，而不是作为 ul“表格”的一部分

当然，您可以完全放弃 ul/li，而只需将 a 标签包装在 nav(或 div ) 标签...那行得通。

Jsfiddle Demo of both methods

CSS

* {
    margin: 0;
    padding: 0;
}

ul,nav {  
    display: table;
    width: 100%;
    text-align: center;
}


li {
    display: table-cell; /* method 1 */
}

nav a {
    display: table-cell;  /* method 2 */
}