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

Question

美好的一天，

我绝对是 CSS 的新手，我正在尝试水平对齐两个输入字段（基本上我希望在页面的左半部分显示 "create an account" 条，在页面的左半部分显示 "sign in"右边）。尽管我或多或少地对齐了给定的输入字段，但我无法正确调整正确的大小。

我对左侧的字段使用了 width:40%，它完成了它的工作。字段变得更大，覆盖了我需要的部分。但是，如果我增加 "right" 的宽度，它们就会被推到左边，但栏的整体大小保持不变。

我试过换位置等等都没有用。通常它只会破坏整个设计。

部分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;
}

基本上，对齐是正确的。 "left" 字段的宽度大小正确（该字段实际上是 40%），但是右边的只保持大约 20% 只是被推到左边（右边是白色 space）。

我认为 "may" 解决问题的唯一想法是用 HTML 制作表格，但我不确定它是否有效，在我进行这样的过程之前我想我会问这里。我认为必须有一些更简单的解决方案。我一直都能看到包含此类内容的网站。

此外，这是我在 Whosebug 上的第一个 post，所以如果我做错了什么，请通知我，以便我纠正错误。

为了更好地解释，下面是页面的外观。我想让右边的 "fields" 和左边的

一样大

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%

此外，请确保 "clear" 您的浮动内容不会与其他页面内容混淆。这是一个 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 比使用浮点数 "better" 因为当你使用不同的尺寸时它更有弹性，它会使列的高度相同，而且 float 通常可以 "bleed" 在其容器之外影响页面上的其他内容，如果您不 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>

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

How to set input box width evenly when input bars are horizontally placed?

html

css

vertical-alignment