如何将一个 div 放在其父级下方，但将其他 div 保持在同一位置？答案

【问题标题】：How do I position just one div below its parent, but keep the other divs in the same spot?如何将一个 div 放在其父级下方，但将其他 div 保持在同一位置？
【发布时间】：2020-06-14 01:44:58
【问题描述】：

所以，我正在创建一个导航栏，我希望当您将鼠标悬停在“计算器”链接上时，它也有一个下拉菜单。如您所见，当您将鼠标悬停在计算器链接上时，它看起来非常奇怪。出于某种原因，下拉菜单的“第一个、第二个和第三个选项”链接并排显示在顶部，因此它们会更改“主页”按钮的位置。如何使链接仅显示在其父 div 下方，并将其他所有内容保持在同一行？

这是代码。将鼠标悬停在“计算器”按钮上，看看我的意思。这三个链接如何进入“计算器”按钮下方的下拉菜单。

<body>
<div class = "menu"><div id = "icon">The Orange Calculator</div>
      <a id = "contact">Contact</a>
      <a id = "help">Help</a>
      <div style = "display: inline" class = "dropdown">
          <a class = "calc">Calculators</a>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
      </div>
      <a id = "home">Home</a></div>
</body>
<style>
body {
  margin: 0;
}
.dropdown:hover .dropdown-content {
  display: inline;
}
.dropdown-content {
  display:none;
}
.menu {
    border-bottom: 2px solid #FF7800;
    //border-image: linear-gradient(to right, white, #FF7800, white);
    //border-image-slice: 1;
    width: 100%;
    font-size: 17px; 
    font-family: Arial;
    line-height: 100px;
}
a {
    float: right;
    width: 12%;
    height: 100;
    text-align: center;
    color: #5F5F5F;
    transition: color 0.4s;
}
a:hover {
    color: #FF7800;
    cursor: pointer;
}
#home {
    background-color: #FF7800;
    color: #FFF;
    display: inline-block;
}
#icon {
    display: inline;
    margin-left: 10;
    font-size: 35
}
</style>

【问题讨论】：

标签： javascript html css drop-down-menu css-position

【解决方案1】：

您可以使用 position:absolute; 相对于其父 div dropdown 轻松对齐下拉 div，并且由于您使用浮动来调整您的元素，我也尝试使用浮动来实现这一点，但您可以使用 css 来实现flexbox，这是一种更好的方法。请尝试以下css

body {
  margin: 0;
}
.dropdown {
  position: relative;
  width: 12%;
  float: right;
  text-align: center;
}
.dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
}
.dropdown-content {
  visibility: Hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: auto;
  padding: 10px;
  display: block;
  border: 1px solid #ccc;
  padding: 15px;
}
.dropdown a {
  float: none;
}
.dropdown-content a {
  width: 100%;
  display:block;
  margin: 4px 0;
}
.menu {
  border-bottom: 2px solid #ff7800;
  //border-image: linear-gradient(to right, white, #FF7800, white);
  //border-image-slice: 1;
  width: 100%;
  font-size: 17px;
  font-family: Arial;
  line-height: 100px;
}
a {
  float: right;
  width: 12%;
  height: 100;
  text-align: center;
  color: #5f5f5f;
  transition: color 0.4s;
}
a:hover {
  color: #ff7800;
  cursor: pointer;
}
#home {
  background-color: #ff7800;
  color: #fff;
  display: inline-block;
}
#icon {
  display: inline;
  margin-left: 10;
  font-size: 35;
}

<body>
  <div class="menu">
    <div id="icon">The Orange Calculator</div>
    <a id="contact">Contact</a>
    <a id="help">Help</a>
    <div style="display: inline" class="dropdown">
      <a class="calc">Calculators</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <a id="home">Home</a>
  </div>
</body>

希望这能解决您的问题。

【讨论】：

几乎是我想要的，但我还需要 Link 3 位于 Link 2 下方，Link 2 位于 Link 1 下方。我该怎么做？
只需将 dropdown-content 中 <a> 标签的 css 更改为 .dropdown-content a { width: 100%;显示：块；边距：4px 0； }
谢谢。这个解决方案正是我一直在寻找的，我尝试使用 flexbox，但它似乎不适用于链接。浮动似乎可以工作。

【解决方案2】：

我建议你使用 flexbox 而不是 float

<body>
  <div class="menu">
    <div class="header">
      <p>The Orange Calculator</p>
    </div>
    <div class="navbar">
      <div class="link-navigation home">
        <a href="#" alt="home">Home</a>
      </div>
      <div class="dropdown">
        <p class="calc link-navigation">Calculators</p>
        <div class="dropdown-content">
          <a href="#" alt="link-1">Link 1</a>
          <a href="#" alt="link-2">Link 2</a>
          <a href="#" alt="link-3">Link 3</a>
        </div>
      </div>
      <div class="link-navigation">
        <a href="#" alt="help">Help</a>
      </div>
      <div class="link-navigation">
        <a href="#" alt="contact">Contact</a>
      </div>
    </div>
  </div>
</body>
<style>
body {
  margin: 0;
}
.menu {
  border-bottom: 2px solid #FF7800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.header, .header > p, .navbar, .dropdown, .link-navigation, .dropdown-content {
  display: inline-block;
}
.link-navigation {
  cursor: pointer;
  font-size: 17px;
  padding: 50px 20px;
}
.link-navigation.home {
  background-color: #FF7800;
  color: #FFF;
}
.link-navigation > a, .dropdown-content > a {
  color: #5F5F5F;
  text-decoration: none;
}
.header {
  margin: auto 0;
}
.header > p {
  font-size: 17px;
  margin: 0;
}
.dropdown-content > a {
  display: block;
  padding: 20px;
}
a:hover, .calc:hover {
  color: #FF7800;
  transition: color 0.4s;
}
.home > a {
  color: #fff;
}
.dropdown > .calc.link-navigation {
  margin: 0;
}
.dropdown-content {
  display: none;
}
.dropdown:hover .dropdown-content {
  display: block;
  position: absolute;
  z-index: 99;
  padding: 0 20px;
}
</style>

您可以在CSS-Tricks阅读更多关于 CSS Flexbox 的信息

【讨论】：