html - 如何等于 float 李的高度

Question

考虑以下简单菜单：

.list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: yellow;
  border: 1px solid black;
}

.floated {
  float: left;
}

.buttonA {
  display: inline-block;
  background-color: grey;
  padding: 10px;
}

.buttonB {
  display: inline-block;
  background-color: grey;
  padding: 20px;
}

<ul class="list">
  <li class="floated">
    <div class="buttonA">Option 1</div>
  </li>
  <li class="floated">
    <div class="buttonB">Option 2</div>
  </li>
  <li class="floated">
    <div class="buttonA">Option 3</div>
  </li>
</ul>

如何使所有浮动按钮的高度相同（等于高度较大的按钮），将黄色背景隐藏在Option 1和Option 3下面？

如何删除菜单右侧的多余黄色？

Answer 1

您将需要指定ul.list的高度，并为height: 100%标记添加div.buttonA, div.buttonB

.list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: yellow;
  border: 1px solid black;
  height: 70px;
}

.floated {
  height:100%;
  float: left;
}

.buttonA {
  height:100%;
  box-sizing: border-box;
  background-color: grey;
  padding: 10px;
}

.buttonB {
  height:100%;
  box-sizing: border-box;
  background-color: grey;
  padding: 20px;
}

<ul class="list">
  <li class="floated">
    <div class="buttonA">Option 1</div>
  </li>
  <li class="floated">
    <div class="buttonB">Option 2</div>
  </li>
  <li class="floated">
    <div class="buttonA">Option 3</div>
  </li>
</ul>