对齐表单中的组件答案

【问题标题】：Aligning components in forms对齐表单中的组件
【发布时间】：2016-07-23 15:53:48
【问题描述】：

这可能是我相当简单的东西，但在我的表格中，我有一个 input 和 type = "password" 和一个 button type = button 并排在一起。在我设法最初排列所有内容后，我决定将两个组件的高度设置为相同的高度

我希望结果是这样的。

当我使用下面的代码时。但是，当您运行下面的代码时，您会看到高度不同。

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}

<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

我该如何解决这个问题？

注意
我知道类似的问题，例如 this 和 this，但在这种情况下，解决方案似乎无效。

【问题讨论】：

标签： html css

【解决方案1】：

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
  border: 0;
 outline: none;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}

<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

【讨论】：

边界答案是正确的。而当您将其更改为填充时，答案不再正确
你知道为什么边框影响这么大吗？
它会影响它，因为它会使顶部和下方的高度增大 1px
一个更简单的解决方案是将高度减少 2 个像素，如 48px。盒子模型的工作原理

【解决方案2】：

默认情况下，输入字段具有 1 像素的填充和 1 像素的边框，因此会导致额外的 4 像素高度。因此，请尝试重置输入填充并调整按钮高度以适应差异。

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  padding:0;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 54px;
}

<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

【讨论】：

【解决方案3】：

使用这个 CSS 属性 box-sizing: border-box 会按您的预期工作。

#password {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
  font-size:100%;
  box-sizing: border-box;
  
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}

<form>



  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>

</form>

【讨论】：

【解决方案4】：

我不知道为什么，但是当我将您的代码复制到我的计算机上进行测试时，它可以工作...尝试将 input[type="password"] 更改为 .form-inp

【讨论】：

【解决方案5】：

这是由于输入框中的一些填充、边框和轮廓，请尝试将高度增加到 60px 之类的；

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 60px;
}

<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

【讨论】：

感谢您的回答，但由于这只是猜测工作，我投了反对票
something like 60px 是猜测工作，当您测试答案时，很明显它不起作用。虽然您似乎走在正确的道路上，但您的答案只是猜测高度
尝试运行这个小提琴并亲眼看看它是否有效，jsfiddle.net/xc59u9rp