div 按钮重叠 HTML
div buttons are overlapping HTML
我正在尝试为自己制作一个在线作品集,我在屏幕的下半部分有一个底部容器,我想在容器的顶部放置 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>
如果我知道怎么做,我会提供一个例子。
谢谢
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,但网格结构是一个很好的起点。
您只需从所有按钮(resumebutton
、coverletterbutton
和 portfoliobutton
)中删除属性 position: absolute;
,然后将 text-align: center
添加到 navbuttons
选择器。
如果容器已固定,则无需绝对定位按钮。您可以在您的容器上使用 inline-block
和 text-align: center
。您的 css 中也有错误,例如没有 float: center;
,您也可以跳过 # 并使用 class,因为它们共享 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>
考虑删除 absolute
定位以将有问题的元素替换回文档流中。它们现在将相互关联,因此您无需依赖 left
和 right
.
等定位规则
元素已经显示 inline-block
因此只需向父级声明 text-align: center
规则,嵌套元素将相应对齐。
在下面的代码片段示例中,每个按钮周围都添加了边距以增加间距,重复规则已替换为使用应用于所有按钮元素的 class 选择器的一个实例,请注意 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>
我正在尝试为自己制作一个在线作品集,我在屏幕的下半部分有一个底部容器,我想在容器的顶部放置 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>
如果我知道怎么做,我会提供一个例子。
谢谢
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,但网格结构是一个很好的起点。
您只需从所有按钮(resumebutton
、coverletterbutton
和 portfoliobutton
)中删除属性 position: absolute;
,然后将 text-align: center
添加到 navbuttons
选择器。
如果容器已固定,则无需绝对定位按钮。您可以在您的容器上使用 inline-block
和 text-align: center
。您的 css 中也有错误,例如没有 float: center;
,您也可以跳过 # 并使用 class,因为它们共享 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>
考虑删除 absolute
定位以将有问题的元素替换回文档流中。它们现在将相互关联,因此您无需依赖 left
和 right
.
等定位规则
元素已经显示 inline-block
因此只需向父级声明 text-align: center
规则,嵌套元素将相应对齐。
在下面的代码片段示例中,每个按钮周围都添加了边距以增加间距,重复规则已替换为使用应用于所有按钮元素的 class 选择器的一个实例,请注意 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>