【发布时间】：2016-10-28 04:50:45
【问题描述】：
我创建了两个按钮，我想将它们放在我的输入登录框下方。我希望它具有响应性，所以我使用了绝对值，但是当我移动它们时，按钮突然重叠了！有什么解决办法吗？这是我的索引和样式表：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0px;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>【问题讨论】：
-
您为什么认为应该使用绝对定位来使其具有响应性？使用绝对定位的项目使页面响应非常困难。熟悉 CSS 媒体查询：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
标签： html css button input responsive