以形式對齊組件

這可能是我相當簡單的東西，但我的表格中，我有一個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

以形式對齊組件

回答

相關問題