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上的Buuilding评论说这意味着a本身就是一个表格单元而不是ul“table”的一部分

当然，您可以完全取消ul/li，只需将a标记包装在nav（或div）标记中即可。< / p>

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 */
}

Answer 2

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

li {
  display: table-row;
}

 a {
  display: table-cell;
  }

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

2 个答案: