Question

进展和我想做的事情应该在这里明确：

在办公室下，我需要将子对象显示在正下方，并且希望宽度与父级相同。

代码：

    <div class="navItem" style="display:inline">
<button class="dropbtn"> Home </button>
</div>

<div class="dropdown" style="display:inline">
<button onclick="myFunction()" class="dropbtn">Offices</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Regional</a>
    <a href="#about">Global</a>
    <a href="#contact">Local</a>
  </div>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Who we are</button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Contact </button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn" id="searchBox"> Search </button>
</div>

Answer 1

所做的更改：

将宽度设置为100％（您可以调整大小并将其缩小为97,98，以使附加填充无效，并且看起来与操作按钮完全对齐）并从下拉内容中删除最小宽度。 / LI>
使用left：0以使下拉列表与父元素对齐。
办公室父div也应该具有“navItem”类，因为它是其余内联按钮之一。

Codepen：https://codepen.io/anon/pen/YEodjR

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: gray;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 19.5%;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: black;
  text-style: bold;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #f9f9f9;
  width: 98%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.show {
  display: block;
}

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Home </button>
</div>

<div class="navItem dropdown" style="display:inline">
  <button onclick="myFunction()" class="dropbtn">Offices</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Regional</a>
    <a href="#about">Global</a>
    <a href="#contact">Local</a>
  </div>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Who we are</button>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Contact </button>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn" id="searchBox"> Search </button>
</div>

Answer 2

将left位置定义为零（相对于它的父级，而不是窗口）。

要使其宽度与其父级相同，请使用right: 0。

您会注意到4px的差异，这是因为父级的内联块。你可以通过将正确的位置设置为4px来解决这个问题。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: gray;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 19.5%;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: black;
  /*invalid
  text-style: bold;*/
}

.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  overflow: auto;
  left: 0;
  right: 4px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.show {
  display: block;
}

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Home </button>
</div>

<div class="dropdown" style="display:inline">
  <button onclick="myFunction()" class="dropbtn">Offices</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Regional</a>
    <a href="#about">Global</a>
    <a href="#contact">Local</a>
  </div>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Who we are</button>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn"> Contact </button>
</div>

<div class="navItem" style="display:inline">
  <button class="dropbtn" id="searchBox"> Search </button>
</div>

Answer 3

1）您已将父项设置为显示为内联，以便所有内容彼此对齐。

2）将其更改为内联块，您将看到下拉线。我建议您查看显示类型，并了解它们各自的行为方式。那时候，它对你来说应该变得更有用了

3）然后需要移除按钮上的宽度，以便不切断按钮。而是在父项上设置宽度，并将按钮和下拉宽度设置为100％。然后他们会把父母带到全宽。

应该这样做。

如何让dropdown nav子元素从顶部跟随父位置

3 个答案: