HTML과 CSS를 사용하여 텍스트와 선택 상자를 동일한 너비로 정렬
- WBOY앞으로
- 2023-09-04 22:37:05942검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：확장할 HTML의 열 수 설정다음 기사：확장할 HTML의 열 수 설정