집 > 기사 > 웹 프론트엔드 > Google 탐색에서 라벨과 입력 사이의 간격 문제를 해결하는 방법

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

php中世界最好的语言원래의: 2018-02-03 10:07:192766검색

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

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

관련 기사