Question

我创建了两个按钮，我想放在输入的登录框下面。我希望它具有响应性，所以我使用绝对值但是当我移动它们时，按钮突然重叠！有解决方案吗这是我的索引和样式表：

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

试试这个......

position:absolute与响应式设计之间没有关系。由于您打算使用绝对值，只需将按钮div放入表单中即可。

* {
  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: 0;
  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{
  margin-top:30px;
  font-size: 14px !important;
}
.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">
       <div>
      <a class="btn btn-full" href="#">Login</a>
      <a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
    </div>
    </form>
   

  </header>

</body>

</html>

修改：这是您的评论。另外，我建议您使用媒体查询进行响应式布局。

* {
  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: 0;
  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 {
  margin-top: 30px;
  font-size: 14px !important;
}
.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;
}
.btns {
   position: absolute;
      /* Turns the the text box to absolute from static (allows free control of placement) */
      width: 100%;
      top: 300px;
      left: 15%;
      right: 0px;
      height: auto;
      font-size: 14pt;
      margin: 0px auto;
      padding: 15px;
}

<!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 class="btns">
      <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>

Answer 2

您可以使用<a></a>标记创建按钮，而不是使用<button></button>标记来创建按钮。这样可以避免按钮重叠。

    <!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>
            <button class="btn btn-full" >Login</button>
            <button class="btn btn-ghost">Don't have an acount? Sign up!      </button>
        </div>

    </header>

 </body>

定位时两个按钮重叠？（HTML / CSS）

2 个答案:

定位时两个按钮重叠？ （HTML / CSS）

2 个答案:

定位时两个按钮重叠？（HTML / CSS）