中心容器(&Z)索引

Question

我正试着对齐下面的下拉列表，但是不能让它工作。此外，我还有一个图层的问题，不幸的是下拉列表显示在下面的容器下。有人能帮帮我吗？有人有主意吗？

null

.dropbtn {
  background-color: #f9f9f9;
  color: #0f0f0f;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 98;
  max-height: 0;
  min-width: 160px;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

.dropdown-content a {
  color: black;
  background-color: #f9f9f9;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #e2e2e2;
}

.dropdown:hover .dropdown-content {
  max-height: 500px;
  min-width: 160px;
  transition: max-height 0.25s ease-in;
}

.dropdown:hover .dropbtn {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  transition: max-height 0.25s ease-in;
}

<div class="dropdown">
  <button class="dropbtn" for="btnControl">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

null

Answer 1

您应该使用flex和main元素转到中心。

null

.main {
  display:flex; /* use flex */
  justify-content:center; /* go to center */
}

.dropbtn {
  background-color: #f9f9f9;
  color: #0f0f0f;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 98;
  max-height: 0;
  min-width: 160px;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
}

.dropdown-content a {
  color: black;
  background-color: #f9f9f9;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #e2e2e2;
}

.dropdown:hover .dropdown-content {
  max-height: 500px;
  min-width: 160px;
  transition: max-height 0.25s ease-in;
}

.dropdown:hover .dropbtn {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  transition: max-height 0.25s ease-in;
}

<div class="main"> <!-- needed main item for align. -->
<div class="dropdown">
  <button class="dropbtn" for="btnControl">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
</div>