728x90
반응형
체크박스와 라벨
체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.
예제
다음은 높이를 조정하는 간단한 예제입니다.
- 첫 번째 체크박스와 라벨은 아무런 조정을 하지 않은 것입니다. 체크박스가 라벨보다 조금 위에 있습니다.
- 두 번째 체크박스와 라벨은 체크박스를 1.5px 밑으로 내려서 높이를 맞추었습니다.
- 세 번째 체크박스와 라벨은 라벨을 1.5px 위로 올려서 높이를 맞추었습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
input[id="b"] {
position: relative;
top: 1.5px;
}
label[for="c"] {
position: relative;
top: -1.5px;
}
</style>
</head>
<body>
<p><input type="checkbox" id="a"> <label for="a">LOREM</label></p>
<p><input type="checkbox" id="b"> <label for="b">LOREM</label></p>
<p><input type="checkbox" id="c"> <label for="c">LOREM</label></p>
</body>
</html>
728x90
반응형
'Study > Jsp' 카테고리의 다른 글
| [jsp] img 태그 에러처리 방법 (0) | 2021.03.17 |
|---|
댓글