以形式对齐组件

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

来源

2016-07-23 Dan

使用此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>

来源

2016-07-23 16:15:33 EddNewGate

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>

来源

2016-07-23 15:58:23

边框的答案是正确的。而当您将其更改为填充时，答案不再正确 – Dan

对不起，在我的移动电话上编辑此问题 –

您知道边界如此影响它吗？ – Dan

-1

这是由于在输入框的一些内边距，边框和轮廓，尝试增加高度，以像60像素;

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>

来源

2016-07-23 15:59:41

谢谢你的回答，但因为这只是猜测工作，我低估了它 – Dan

不是一个猜测工作，我在jsfiddle –

测试它'像60px'是猜测工作，当你测试你的答案是清楚的不起作用。虽然你似乎在正确的道路上，你的答案只是猜测与高处 – Dan

我不知道为什么，但是当我复制你的代码到我的电脑测试一下它的工作...尝试改变输入[类型=“密码”]来。 form-inp

来源

2016-07-23 16:03:47 PedroNeves

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

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>

来源

2016-07-23 16:05:06

以形式对齐组件

回答

相关问题