Home > Article > Web Front-end > Align text and select box to same width using HTML and CSS
Align text and select box to same width using HTML and CSS
- WBOYforward
- 2023-09-04 22:37:05917browse
When we set the width and height of an element in CSS, the element will often appear larger than its actual size. This is because by default, padding and borders are added to the element's width and height before the element is displayed.
Box sizing properties include the actual element's padding and borders. Width and height so that the element doesn't look larger than it actually is. Use this property in the format "box-sizing: box-border"
Example
You can try running the following code to align text and select boxes of the same width -
<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>The above is the detailed content of Align text and select box to same width using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!