确保动态输入填充浏览器宽度的50％

Question

这次输入框出现问题。如果我只添加其中的3个，则它们占据浏览器窗口宽度的大约50％。但是当我添加更多时，它们会在两侧伸展。 我希望他们能够适应50％的浏览器窗口，无论他们有多少人在这里。任何解决方案？

Page1（正常）

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

Page2（超宽）

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

也许这对你有用：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

要将滚动条固定到右侧，请将transform: translateX(-50%);添加到外部div，然后移除内部div中的left: -50%;。

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