How to solve the spacing problem between label and input in Google Browse-HTML Tutorial-php.cn

How to solve the spacing problem between label and input in Google Browse

php中世界最好的语言

Release： 2018-02-03 10:07:19

Original

2826 people have browsed it

This time I will show you how to solve the problem of spacing between labels and inputs in Google browsing. What are the precautions to solve the problem of spacing between labels and inputs in Google browsing. The following is a practical case. Let’s take a look. one time.

<!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>

Copy after login

The distance between the label and input of the verification code is obviously larger than the above two. After removing the line breaks of the verification code and making it one line, the three input boxes are aligned. The reason is not yet known.

PS: img and input are not aligned as recorded in previous essays. You only need to add vertical-align:middle respectively.

I believe you have mastered it after reading these cases. For more exciting methods, please pay attention to other related articles on the php Chinese website!