水平放置输入条时如何均匀设置输入框的宽度？

Question

美好的一天，

我绝对是CSS的初学者，并且正在尝试水平对齐两个输入字段（基本上，我希望在页面的左半部分使用“创建帐户”栏，而在右侧使用“登录”栏）。即使我已经或多或少地对齐了给定的输入字段，但我仍无法正确调整正确的大小。

我在左侧的字段中使用了width:40%，它完成了它的工作。领域变得更大，涵盖了我需要的部分。但是，如果我增加“右侧”的宽度，它们只会被推到左侧，但条形的整体尺寸保持不变。

我尝试更改职位等，但无济于事。通常，它只会破坏整个设计。

部分HTML代码：

<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>

部分CSS代码（首先是左侧，然后是右侧）

.content input[type=text], input[type=password] {
  width: 40%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 41%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.signInContent {
  float: right;
  width: 50%;
}

.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

基本上，对齐是正确的。正确调整了“左侧”字段的宽度（该字段实际上是40％），但是右侧字段仅停留在20％左右，只是被向左推（右侧带有空白）。

我唯一可以“解决”该问题的想法是用HTML制作表格，但是我不确定它是否可以工作，直到我执行这样的过程后，我以为我会在这里问这个问题。我认为必须有一些更简单的解决方案。我经常看到带有此类内容的网站。

另外，这是我关于stackoverflow的第一篇文章，因此，如果我做错了什么，请通知我，以便我纠正错误。

为更好地解释，下面是页面的外观。我希望右边的“字段”与左边的字段相同

Answer 1

第一个问题是div.signInContent仅是div.content宽度的一半，而div.registerContent是div.content的完整宽度。这很重要，因为百分比值（如width: 40%）是相对于父元素的相同值（即宽度）。

同时浮动两个div可以解决此问题：

.content div {
  float: right;
  width: 50%;
}

然后，您看到两个div都显示了原始问题。这可能感觉像是倒退了一步，但是现在我们可以用相同的方式对待两个div了。 100的40％与50的80％相同；因此，让我们使用80％而不是40％：

.content input[type=text], input[type=password] {
  width: 80%;
  ...
}

这是完整的工作演示

.content input[type=text], input[type=password] {
  width: 80%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.content div {
  float: right;
  width: 50%;
}
.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>

Answer 2

您最好的选择是确定div容器的大小和位置，然后使输入内容占其容器宽度的100％。尽管我注意到您正在扩大一些投入的重点。是什么原因呢？

以下是使用浮点数（您的问题的扩展部分）的示例：

（这里使用简单的百分比将不起作用，因为填充被添加到宽度，例如40％+ 20px + 20px + 60％+ 20px + 20px = 100％和80px）calc让CSS进行数学运算等于100％

此外，请确保“清除”您的浮动内容，以免它们干扰其他页面内容。这是good way要做的。

.leftSide, .rightSide {
	padding: 20px;
}
.leftSide {
	float: left;
	width: calc(60% - 40px);
	background: #dadada;
}
.rightSide {
	float: right;
	width: calc(40% - 40px);
	background: #eee;
}

input {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

<div class="container">
	<div class="leftSide">
		<input type="text">
		<input type="text">
		<input type="text">
	</div>
	<div class="rightSide">
		<input type="text">
		<input type="text">
	</div>
</div>

使用CSS flexbox的更好解决方案

flex-box比使用浮点数“更好”，因为当您使用不同的大小时，它更具弹性，它将使列具有相同的高度，并且float经常可以在容器外部“渗出”以影响页面上的其他内容（如果您没有clear浮点数）。

.container {
	display:flex;
	justify-content: space-between;
}
.leftSide, .rightSide {
	padding: 20px;
}
.leftSide {
	flex-basis: calc(60% - 40px);
	background: #dadada;
}
.rightSide {
	flex-basis: calc(40% - 40px);
	background: #eee;
}

input {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

<div class="container">
	<div class="leftSide">
		<input type="text">
		<input type="text">
		<input type="text">
	</div>
	<div class="rightSide">
		<input type="text">
		<input type="text">
	</div>
</div>