美工统筹SEO，为企业电子商务营销助力！
谷歌阅读下label与input间距的小题目
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-20 08:53:05 阅读数: 191
先码后文
复制代码代码以下:
<!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>
谷歌翻开结果以下
考证码的label和input之间的间距较着较下面两个大，将考证码代码的换行去掉，并为一行以后，三个input框就对齐了，缘由还不晓得。
PS：img和input不对齐之前的漫笔记实过，只要要别离加个vertical-align:middle就行
复制代码代码以下:
<!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>
谷歌翻开结果以下
考证码的label和input之间的间距较着较下面两个大，将考证码代码的换行去掉，并为一行以后，三个input框就对齐了，缘由还不晓得。
PS：img和input不对齐之前的漫笔记实过，只要要别离加个vertical-align:middle就行
TAG标签： 谷歌阅读下label与input间距的小题目
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事履历，供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版，拖拽排版网站建造设想，轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ，已胜利的为天下上百家收集公司供给自助建站平台搭建办事。
