div 按钮与 HTML 重叠答案

【问题标题】：div buttons are overlapping HTMLdiv 按钮与 HTML 重叠
【发布时间】：2016-06-05 19:54:22
【问题描述】：

我正在尝试为自己制作一个在线作品集，我在屏幕的下半部分有一个底部容器，我想在容器顶部放置 3 个按钮。我已经让它工作了，除非你调整页面大小。当您缩小页面的宽度时，按钮将重叠。我怎样才能阻止它们重叠？我希望它们并排靠近，但不要重叠。

h1 {
  margin-left: 33%;
  margin-right: 33%;
  text-align: center;
}

img {
  width: 15%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#top,
#bottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 50%;
}

#bottom {
  border-top: 2px solid black;
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: center;
  position: fixed;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 17px;
}

#navbuttons {
  border-top: 2px solid black;
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: center;
  position: relative;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 10px;
}

#resumebutton {
  display: inline-block;
  position: absolute;
  top: 0%;
  left: 33%;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
}

#coverletterbutton {
  display: inline-block;
  position: absolute;
  top: 0%;
  left: 46.5%;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
}

#portfoliobutton {
  display: inline-block;
  position: absolute;
  top: 0%;
  left: 62.5%;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
}

<!DOCTYPE html>

<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>--Name Here-- Resume and Portfolio</title>
  </head>

  <body>
    <div style="height: 100%"></div>
    <div id="top"></div>


    <h1>--Name Here--</h1>

    <img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg"/>

    <h1>Resume and Portfolio</h1>

    <div id="bottom">
      <div id="navbuttons">
        <div id="resumebutton">Resume</div>
        <div id="coverletterbutton">Cover Letter</div>
        <div id="portfoliobutton">Portfolio</div>
      </div>
    </div>

  </body>

</html>

如果我知道怎么做，我会提供一个例子。

谢谢

【问题讨论】：

我意识到一些标签在发布这个过程中被移动了一点
您可以使用 codepen.io 或 jsfiddle 或任何数量的其他工具制作示例。此外，考虑转储固定定位并使用可以正确调整大小的东西，例如 flex 甚至浮动。最后，我在您的示例中看不到链接。请确保您有链接，而不是带有onclick 事件的<div>s。

标签： html css overlap

【解决方案1】：

如果您已固定容器，则无需绝对定位按钮。您可以在容器上使用 inline-block 和 text-align: center。你的css中也有错误，比如没有float: center;，你也可以跳过#并使用类，因为它们共享css属性。但我同意 Bootstrap 是实现响应式的方法，尤其是如果您是新手。

#bottom {
  border-top: 2px solid black;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: fixed;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 17px;
}

.nav-button {
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
}

<div id="bottom">
   <div class="nav-button">Resume</div>
   <div class="nav-button">Cover Letter</div>
   <div class="nav-button">Portfolio</div>
</div>

【讨论】：

这解决了我的问题，非常感谢，我将更多地研究引导程序，而不是像以前那样拼凑起来。谢谢。

【解决方案2】：

bootstrap grid system 在这方面做得很好。我建议将它与您的一些自定义样式结合使用，以产生一个底部部分，分成大小相等的列。

网格被分成 12 列，因此 4 列（例如 col-md-4）将在垂直方向上均匀分布。

对于底部，这看起来像：

<div id="bottom">
      <div id="navbuttons" class="row">
        <div id="resumebutton" class="col-md-4">Resume</div>
        <div id="coverletterbutton" class="col-md-4">Cover Letter</div>
        <div id="portfoliobutton" class="col-md-4">Portfolio</div>
      </div>
</div>

如果您想在这些列中将较小的按钮居中，您可以将这些列包装为 div，但网格结构是一个很好的起点。

【讨论】：

【解决方案3】：

您可以从所有按钮（resumebutton、coverletterbutton 和portfoliobutton）中删除属性position: absolute;，并将text-align: center 添加到navbuttons 选择器。

【讨论】：

【解决方案4】：

考虑删除absolutepositioning 以将有问题的元素替换回文档流中。它们现在将相互关联，因此您无需依赖诸如 left 和 right 之类的定位规则。
元素已经显示inline-block，因此只需向父级声明text-align: center 规则，嵌套元素就会相应地对齐。
在下面的 sn-p 示例中，已在每个按钮周围添加边距以用于间距，重复规则已替换为使用应用于所有按钮元素的类选择器的一个实例，请注意 float: center; 不是有效规则。

片段示例

h1 {
  margin-left: 33%;
  margin-right: 33%;
  text-align: center;
}
img {
  width: 15%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#top,
#bottom {
  position: fixed;
  left: 0;
  right: 0;
  height: 50%;
}
#bottom {
  border-top: 2px solid black;
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: center;
  position: fixed;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 17px;
}
#navbuttons {
  border-top: 2px solid black;
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: center;
  /* invalid rule */
  position: relative;
  border: 2px solid black;
  padding: 15px;
  padding-bottom: 10px;
  text-align: center;
}
#navbuttons .button {
  display: inline-block;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 5px;
  background-color: #7dd7f5;
  text-align: center;
  margin: 0px 20px;
}

<div style="height: 100%"></div>
<div id="top"></div>

<h1>--Name Here--</h1>

<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg" />

<h1>Resume and Portfolio</h1>

<div id="bottom">
  <div id="navbuttons">
    <div id="resumebutton" class="button">Resume</div>
    <div id="coverletterbutton" class="button">Cover Letter</div>
    <div id="portfoliobutton" class="button">Portfolio</div>
  </div>
</div>

【讨论】：