html - 如何使浮动李的高度相等

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？

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

标签： htmlcss