CSS で要素の幅と高さを設定すると、多くの場合、要素は実際のサイズよりも大きく表示されます。これは、デフォルトでは、要素が表示される前に要素の幅と高さにパディングと境界線が追加されるためです。
ボックスのサイズ設定プロパティには、実際の要素のパディングと境界線が含まれます。要素が実際よりも大きく見えないように幅と高さを調整します。このプロパティは、「box-sizing: box-border」の形式で使用します。
次のコードを実行して、テキストを配置し、同じ幅のボックスを選択します。 -
<html>
<head>
<style>
input, select {
width: 250px;
border: 2px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<input type = "text" value = "Name of Candidate"><br>
<select>
<option>Select Choice</option>
<option>Student</option>
<option>Teachers</option>
<option>Head</option>
</select>
</body>
</html>以上がHTML と CSS を使用してテキストと選択ボックスを同じ幅に揃えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
