<a> with same size of it&#39;s </a> <LI> <a> parent with display: table-cell

Question

I have a list with a some with one line, others with two lines. How I can force to have the same height and width as his li parent with display:table-cell and vertically align text?

ul {
  display:table;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
}

a:hover {
  background-color:red
}

<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Answer 1

height:100%只有在所有父母都设置了高度并且其中一个不是百分比时才会起作用（除非身高和html标签的所有高度都有百分比高度）

考虑到这一点，我们可以在height:100%上设置li，然后将ul的高度设为0 - 正如您使用display:table一样，表格总是如此成长到他们内容的高度

ul {
  display:table;
  width:700px;
  height:0;       /* add this */
  table-layout:fixed;
}

li {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  border-right:3px solid white;
  background-color:#ddd;
  height:100%;       /* add this */
}

a {
  display:block;
  height: 100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
  box-sizing: border-box; /* add this to get rid of the big gap at the bottom */
}

a:hover {
  background-color:red
}

<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

<强>更新

好的，如果您只使用表进行垂直对齐，那么我会将其更改为flex - 它可以让您更好地控制子元素：

ul {
  list-style: none;
  display: flex;
  width: 700px;
}
li {
  display: flex;
  margin-right: 3px;
  background-color: #ddd;
  box-sizing: border-box;
  flex-grow: 1;
  flex-basis: 0;
}
a {
  display: flex;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  background-color: #aaa;
  padding: 1em 1.2em;
  box-sizing: border-box;
}
a:hover {
  background-color: red
}

<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Answer 2

您可以将填充和背景颜色应用于父<li>元素，如下所示：

＆＃13;

＆＃13;

ul {
  display:table;
  width:500px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  padding:1em 1.2em; 
  background-color:#aaa;
}

a {
  display:table-cell;
  height:100%; 
  vertical-align:middle;
}

a:hover {
  background-color:red
}

＆＃13;

<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

一个非常快速的解决方案是将display上的ul设置更改为flex：

＆＃13;

＆＃13;

ul {
  display:flex;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em 0 1.2em;  
}

a:hover {
  background-color:red
}

＆＃13;

<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

（我也更改为a的底部填充太多了）

Answer 4

首先，您无法为那些li＆gt;设置相同的高度a没有将CSS设置为white-space: nowrap;，除非您在CSS中放置了一些固定的height:200px;（不推荐）

你可以试试这个。

li {
    display: table-cell;
    border-right: 3px solid white;
    text-align: center;
    vertical-align: center;
    background-color: #ddd;
    width: 10%;
}
a {
    display: block;
    background-color: #aaa;
    white-space: nowrap;
}

li元素中添加了10％宽度，以根据父级ul动态调整宽度。