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

php中世界最好的语言
Release: 2018-02-03 10:07:19
Original
2843 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!

Related reading:

How to solve the problem that the size of the textarea label cannot be changed and cannot be dragged by mouse dragging

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template