个人中心
gpt4 book ai didi

html - 定位时两个按钮重叠？ (HTML/CSS)

转载 作者：行者123 更新时间：2023-11-28 04:57:37 24 4
gpt4 key购买 nike

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

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

最佳答案

试试这个...

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>

关于html - 定位时两个按钮重叠？ (HTML/CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40298232/

24 4 0
文章推荐： javascript - .callFake 与 $q 仍然不进入 .then block
文章推荐： html - 为什么 Firefox 不会在没有错误消息的情况下启动 Css？
文章推荐： c++ - 使用 boost::bind 时出错
文章推荐： javascript - 如何从注册页面进入预览页面并从预览页面返回注册页面进行修改
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com