html - 输入栏横放时如何均匀设置输入框宽度？

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 容器的大小和位置，然后使输入占其容器宽度的 100%。尽管我注意到您正在使一些输入更加集中。这是什么原因？

这是一个使用 float 的示例(您的问题的扩展):

(在这里使用简单的百分比是行不通的，因为填充被添加到宽度上，例如 40% + 20px + 20px + 60% + 20px + 20px = 100% 和 80px)calc 让 CSS算一下等于 100%

此外，请确保“清除”您的 float 内容，以免它们与其他页面内容混淆。这是一个 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 “更好”，因为当您使用不同的尺寸时它更有 flex ，它会使列的高度相同，并且 float 通常可以如果您不清除 float ，它就会“溢出”到容器之外以影响页面上的其他内容。

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