div按钮重叠HTML

时间:2016-06-05 19:54:22

标签: html css overlap

我正在尝试为自己创建一个在线投资组合,我有一个底部容器用于屏幕的下半部分,我想在容器的顶部放置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>
&#13;
&#13;
&#13;

如果我知道如何,我会提供一个例子。

谢谢

4 个答案:

答案 0 :(得分:2)

如果您已修复容器,则不需要绝对定位按钮。您可以在容器上使用myLong.shortValue()inline-block。你的css中也有错误,比如没有text-align: center,你也可以跳过#并使用类,因为它们共享css属性。但我同意Bootstrap是提供响应的方式,特别是如果你是新手。

float: center;

答案 1 :(得分:1)

The bootstrap grid system之前执行ng-click非常棒。我建议将它与一些自定义样式结合使用,以生成底部分割成相同大小的列。

网格被分成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,但网格结构是一个很好的起点。

答案 2 :(得分:0)

您只需从所有按钮(position: absolute;resumebuttoncoverletterbutton)中删除属性portfoliobutton,然后将text-align: center添加到navbuttons选择器即可。

答案 3 :(得分:0)

考虑删除absolute定位,将有问题的元素替换回文档流。它们现在彼此有关系,因此您无需依赖leftright等定位规则。
元素已显示inline-block,因此只需向父级声明text-align: center规则,嵌套元素将相应对齐。
在下面的代码段示例中,为了间距在每个按钮周围添加了边距,使用应用于所有按钮元素的类选择器将重复规则替换为一个实例,请注意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>