css 按钮宽度作为百分比?响应按钮问题

Css button width as percentage? Responsive button issues

本文关键字：按钮 响应 问题 百分比 css      更新时间：2023-09-26

我的问题是，每当我进行注册和登录表单时，按钮元素都不会保持在我设置的宽度（75%）。它太大或太小取决于我如何调整大小。您可以看到，如果您运行代码，与表单容器或文本输入相比，它不均匀。

目录

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Notes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="js/animation.js"></script>
    <script src="js/verification.js"></script>
  </head>
  <body>
    <div id="header">
      <div id="header-wrapper">
        <h1 id="banner">Notes</h1>
        <button id="register-btn">Register</button>
        <button id="login-btn">Login</button>
      </div>
    </div>
    <div id="register-form-container">
      <form action="" method="post">
        <input type="username" class="username" placeholder="Username"><br>
        <input type="password" class="password" placeholder="Password"><br>
        <input type="submit" class="submit-btn" value="Sign Up">
      </form>
    </div>
    <div id="login-form-container">
      <form action="php/login.php" method="post">
        <input type="username" class="username" placeholder="Username"><br>
        <input type="password" class="password" placeholder="Password"><br>
        <input type="submit" class="submit-btn" value="Login">
      </form>
    </div>
  </body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
* {
  font-family: "PT Sans", sans-serif;
}
html, body {
  margin: 0%;
  width: 100%;
  height: 100%;
}
#header {
  height: 100px;
  width: 100%;
  background-color: #1ABC9C;
}
#header-wrapper {
  width: 50%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
#banner {
  margin: 0%;
  padding: 0%;
  text-align: center;
  font-size: 45px;
  font-weight: lighter;
}
#register-btn {
  float: left;
}
#login-btn {
  float: right;
}
#register-btn, #login-btn {
  font-size: 25px;
  margin: 0%;
  padding: 0%;
  background: none;
  border: none;
}
#register-btn:hover, #login-btn:hover {
  color: #004C3D;
}
#register-form-container, #login-form-container {
  display: none;
  width: 50%;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  background-color: #ECF0F1;
  border-radius: 20px;
}
.username {
  margin-top: 50px;
}
.username, .password {
  width: 75%;
  height: 50px;
  margin-left: 12.5%;
  margin-right: 12.5%;
}
.submit-btn {
  width: 75%;
  height: 50px;
  margin-left: 12.5%;
  margin-right: 12.5%;
  margin-bottom: 50px;
  background-color: #1ABC9C;
  border: none;
}
.username:focus, .password:focus {
  box-shadow: 0 0 10px #9ECAED;
}

Jquery（很确定这对这个问题已经过时了）

var isOpen = false;
$(document).ready(function() {
  $("#register-btn").click(function() {
    if(isOpen) {
      isOpen = false;
      $("#register-form-container").css("display", "none");
    } else {
      isOpen = true;
      $("#register-form-container").css("display", "block");
    }
  });
  $("#login-btn").click(function() {
    if(isOpen) {
      isOpen = false;
      $("#login-form-container").css("display", "none");
    } else {
      isOpen = true;
      $("#login-form-container").css("display", "block");
    }
  });
});

JSFiddle： https://jsfiddle.net/s0t1m4ae/

你只需要应用这个：

.username, .password, .submit-btn {
  padding: 0px 0px; /* You could put here something custom, like 0px 5px; if you want */
  box-sizing: border-box;
}

为了解决这一切。

相关文章：