html - 如何在按钮下放置一个下拉列表

Question

如何对齐按钮下的下拉列表？现在我有两个按钮！[buttons][1]，我想在按钮下放置两个列表，但看起来像这样！[Image1][2] 或像这样！[Image2][3]。

标签： htmlcss

Answer 1

1. 您可以使用flexbox创建类似网格的功能来保持一切简单和有条理。

2. 我已经评论了您需要删除的 CSS。

3. 从这里了解有关 flex 的更多信息并制作一个出色的应用程序：
   https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

.row {
  width: 100%;
  display: flex;
  gap: 20px;
}
.col {
  flex-grow: 1;
}
.menubutton {
  background-color: rgb(216, 213, 210);
  /* width: 30%; */
  text-align: center;
  padding: 10px;
  cursor: pointer;
  /* float: left; */
  /* margin-left: 5px; */
  margin-top: 20px;
  font-size: 25px;
  color: rgb(7, 0, 0);
  border-radius: 5px;
  border: 3px solid gray;
}
.mainmenu {
  text-align: center;
  /* width: 25%; */
  background-color: transparent;
  color: rgb(17, 15, 15);
  /* float: left; */
}

<div class="row">
  <div class="col">
    <div id="show-humidity-button" class="menubutton">Hide Humidity</div>

    <div id="show-humidity" class="mainmenu">
      <div id="panel-humidity1" style="height: auto;" class="panel">List</div>
    </div>
  </div>
  <div class="col">
    <div id="show-temperature-button" class="menubutton">Hide Temperature</div>
    <div id="show-temperature" class="mainmenu">
      <div id="panel-44" style="height: auto;" class="panel">List</div>
    </div>
  </div>
</div>