フォーム内のコンポーネントの整列

Question

これはおそらく私が紛失している単純なものですが、私のフォームには、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

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

Answer 2

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 3

これは60PXのようなものに高さを増やしてみてください、InputBox関数ではいくつかのパディング、ボーダーやアウトラインによるものです。

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>

Answer 4

私は知らない理由が、私はそれをテストするために私のコンピュータにあなたのコードをコピーしたとき、それが働いた...入力[タイプ=「パスワード」]に変更してみます。 form-inp

Answer 5

入力フィールドのデフォルトでは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>