根据较高的兄弟姐妹（将父母的身高设为自动）来扩展孩子的身高

Question

简单问题（下面的代码段）：

• <ul>与display: flex
• 每个<li>的大小应相同，并且在一起必须占据<ul>的整个宽度
• 每个<li>都有一个<a>，其内容可能包含1或2行文本。
• 每个<li>已将高度设置为自动以调整为<a>的内容

我的问题：

我需要“单行”链接自动扩展到“两行”链接的高度。设置height: 100%无效，因为他们的父母height故意设置为自动调整内容。

但是在某些情况下，我会获得两行链接，在某些情况下，所有链接都将是单行。因此，当发生这种情况时，我需要单行链接来自动展开。

这怎么可能？

#root {
  width: 140px;
  box-sizing: border-box;
}

ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

li {
  flex-grow: 1;
  flex-basis: 30px;
  list-style-type: none;
  display: inline-block;
  border: 1px dotted blue;
  height: auto;
}

a {
  cursor: pointer;
  border: 1px dotted green;
  display: inline-block;
  background-color: lightblue;
  padding: 8px 0px;
}

<div id="root">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Long Link 2</a></li>
  </ul>
</div>

Answer 1

您可以从锚的顶部和底部省略填充，并使用高度100％a{height: 100%;}

#root {
  width: 140px;
  box-sizing: border-box;
}

ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

li {
  flex-grow: 1;
  flex-basis: 30px;
  list-style-type: none;
  display: inline-block;
  border: 1px dotted blue;
  height: auto;
}

a {
  cursor: pointer;
  border: 1px dotted green;
  display: inline-block;
  background-color: lightblue;  
  height: 100%;
}

<div id="root">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Long Link 2</a></li>
  </ul>
</div>

Answer 2

您不需要将inline-block与flex一起使用。只需将display: flex使用li，将display: block使用a。最后，为width: 100%添加a。看来符合您的要求。

#root {
  width: 140px;
  box-sizing: border-box;
}

ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

li {
  flex-grow: 1;
  flex-basis: 30px;
  list-style-type: none;
  display: flex;
  border: 1px dotted blue;
  height: auto;
}

a {
  cursor: pointer;
  border: 1px dotted green;
  display: block;
  background-color: lightblue;
  padding: 8px 0px;
  width: 100%;
}

<div id="root">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Long Link 2</a></li>
  </ul>
</div>