确保动态输入占浏览器宽度的 50%

Question

这次我遇到了输入框的问题。如果我只添加其中的 3 个，它们将占据浏览器 window 的大约 50% 的宽度。但是当我添加更多时，它们会向两侧伸展。我希望它们只适合 50% 的浏览器 window，无论这里有多少。有什么解决办法吗？

第 1 页（正常）

* {
  box-sizing: border-box;
}
h1 {
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  line-height: 170px;
  letter-spacing: -8px;
  border: 10px solid #66004C;
}
input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border-left: solid 5px #66004C;
  border-right: 0;
  border-top: 0;
  border-bottom: solid 3px #66004C;
  background: #cdcdcd;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
input:hover,
input:focus {
  -webkit-background: #C299B7;
  -moz-background: #C299B7;
  background: #C299B7;
}

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">
    <h1 align="center">Log In</h1>
    <form action="" method="post">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <input type="submit" value="Log In" style="background: #66004C; color: #efefef;">
      <br>
    </form>
    <form action="http://www.reflinks.cba.pl/register.php">
      <!--OOOOOOOOOOOOOOOOOOOOOOOO--------IMPORTANT TO CHANGE--------->
      <input type="submit" value="Don't have an account yet? Register!" style="border-bottom: solid 5px #66004C;">
    </form>
  </div>
</div>

第 2 页（加宽）

* {
  box-sizing: border-box;
}
h1 {
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  line-height: 170px;
  letter-spacing: -8px;
  border: 10px solid #66004C;
}
input {
  margin: auto;
  padding: 25px;
  font: normal 15px Verdana, Tahoma, sans-serif;
  width: 100%;
  border-left: solid 5px #66004C;
  border-right: 0;
  border-top: 0;
  border-bottom: solid 3px #66004C;
  background: #cdcdcd;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
input:hover,
input:focus {
  -webkit-background: #C299B7;
  -moz-background: #C299B7;
  background: #C299B7;
}

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">
    <h1 align="center">Register</h1>
    <form action="" method="post">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="reg_password" placeholder="Password">
      <input type="password" name="reg_password_repeat" placeholder="Repeat the Password">
      <input type="email" name="email" placeholder="Your Email">
      <input type="submit" value="Register" style="background: #66004C; color: #efefef;">
      <br>
    </form>
    <form action="http://www.reflinks.cba.pl/index.php">
      <input type="submit" value="Already have an account? Log in!" style="border-bottom: solid 5px #66004C;">
    </form>
  </div>
</div>

Answer 1

也许这对你有用：

* {
 box-sizing: border-box;
}
h1 {
 font-family: Verdana, Tahoma, sans-serif;
 font-size: 150px;
 font-style: normal;
 font-weight: 400;
 line-height: 170px;
 letter-spacing: -8px;
 border: 10px solid #66004C;
}
input {
 margin: auto;
 padding: 25px;
 font: normal 15px Verdana, Tahoma, sans-serif;
 width: 100%;
 border-left: solid 5px #66004C;
 border-right: 0;
 border-top: 0;
 border-bottom: solid 3px #66004C;
 background: #cdcdcd;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -ms-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}
input:hover, input:focus {
 -webkit-background: #C299B7;
 -moz-background: #C299B7;
 background: #C299B7;
}

<div style="width: 50%; margin: 0 auto;">
 <h1 align="center">Log In</h1>
 <form action="" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="submit" value="Log In" style="background: #66004C; color: #efefef;">
  <br>
 </form>
 <form action="http://www.reflinks.cba.pl/register.php">
  <!--OOOOOOOOOOOOOOOOOOOOOOOO--------IMPORTANT TO CHANGE--------->
  <input type="submit" value="Don't have an account yet? Register!" style="border-bottom: solid 5px #66004C;">
 </form>
</div>

Answer 2

您可以调整外部宽度 div 以减小表单的宽度。

为了固定卷轴向右，将transform: translateX(-50%);添加到外部div并删除内部div中的left: -50%;。

https://jsfiddle.net/afelixj/6vp0tmn7/

确保动态输入占浏览器宽度的 50%

Ensure Dynamic inputs fill 50% of browser width

html

css

input

form-submit