Home >Web Front-end >HTML Tutorial >How to solve the spacing problem between label and input in Google Browse
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>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!
Related reading:
##How to use CSS to set the width of INPUT in TD
How to implement the viewport in the meta tag to control the css attribute of the device screen
How to add styles to images for radio and multi-select buttons
The above is the detailed content of How to solve the spacing problem between label and input in Google Browse. For more information, please follow other related articles on the PHP Chinese website!