Google 탐색에서 라벨과 입력 사이의 간격 문제를 해결하는 방법-HTML 튜토리얼-php.cn

Google 탐색에서 라벨과 입력 사이의 간격 문제를 해결하는 방법

php中世界最好的语言

풀어 주다： 2018-02-03 10:07:19

원래의

2773명이 탐색했습니다.

이번에는 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 중국어 웹사이트에 주목하세요!