이번에는 Google 브라우징에서 라벨과 입력 사이의 공백 문제를 해결하는 방법을 보여 드리겠습니다. Google 브라우징에서 라벨과 입력 사이의 공백 문제를 해결하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 바라보다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:500px;
height
:500px;
margin
:0 auto; border:#000 solid 1px;}
label {
display
:inline-block; width:100px;border:#000 solid 1px;}
input { border:#000 solid 1px;}
</style>
</head>
<body>
<div>
<p><label>账号</label><input type="text" /></p>
<p><label>密码</label><input type="text" /></p>
<p>
<label>
验证码
</label>
<input type="text" /><img src="" width="100" height="20" />
</p>
</div>
</body>
</html>인증코드의 라벨과 입력 사이의 거리가 위의 두 개보다 확실히 더 큽니다. 인증 코드의 줄 바꿈을 제거하고 한 줄로 만든 후 세 개의 입력 상자가 정렬된 이유는 아직 알 수 없습니다. .
PS: img와 입력은 이전 에세이에 기록된 대로 정렬되지 않습니다. 각각 vertical-align:middle만 추가하면 됩니다.
이 사례를 읽은 후에는 이 방법을 익히셨을 것입니다. 다른 PHP 중국어 웹사이트에 주목하세요!
관련 읽기:
텍스트 영역 레이블 크기가 변경 불가능하고 마우스 드래그로 끌 수 없는 문제를 해결하는 방법
CSS를 사용하여 TD에서 INPUT 너비를 설정하는 방법
방법 메타 구현 태그의 뷰포트는 장치 화면의 CSS 속성을 제어합니다
위 내용은 Google 탐색에서 라벨과 입력 사이의 간격 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
