对齐表单中的组件

Question

这可能是我非常简单的事情，但是在我的表单中，我有一个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，但在这种情况下解决方案似乎无效。

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

Answer 2

输入字段默认为1px填充以及1像素边框，因此会产生额外的4px高度。因此，请尝试重置输入填充并调整按钮高度以适应差异。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用此CSS属性box-sizing: border-box并按预期工作。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我不知道为什么，但当我将您的代码复制到我的计算机上进行测试时，它工作正常...尝试将输入[type =＆＃34;密码＆＃34;]更改为.form-inp

Answer 5

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;