简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

谷歌浏览的label与input间距问题应该如何解决

php中世界最好的语言
Lepaskan： 2018-02-03 10:07:19
asal
2825 orang telah melayarinya

这次给大家带来谷歌浏览的label与input间距问题应该如何解决，解决谷歌浏览的label与input间距问题的注意事项有哪些，下面就是实战案例，一起来看一下。

<!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>
Salin selepas log masuk

验证码的label和input之间的间距明显较上面两个大，将验证码代码的换行去掉，并为一行之后，三个input框就对齐了，原因还不晓得。

PS：img和input没有对齐以前的随笔记录过，只需要分别加个vertical-align:middle就行 

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

怎样解决textarea标签大小不可变不能通过鼠标拖动的方式来拖动的问题

如何使用CSS对TD中INPUT的宽度设置

怎样实现meta标签中的viewport来控制设备屏幕的css属性

单选和多选按钮如何给图片加样式

Atas ialah kandungan terperinci 谷歌浏览的label与input间距问题应该如何解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
input jarak
sumber：php.cn
Artikel sebelumnya：meta的标签有哪些作用 Artikel seterusnya：怎样通过disabled和readonly将input设置为只读效果
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tidak dapat mendapatkan elemen input daripada tapak web Jadi saya cuba mendapatkan elemen input daripada Twitter tetapi apabila saya menjalankanny...
daripada 2024-04-06 18:59:57
0
1
442
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Paparkan tatasusunan objek bersarang dalam jadual HTML dengan mengulang Saya mempunyai input berikut yang mengandungi pelbagai objek bersarang. summary ialah tata...
daripada 2024-04-05 14:11:42
0
1
1373
Biarkan React memberikan teg penutup input? Saya mempunyai permintaan yang luar biasa. Tapak web saya dibina menggunakan React dan say...
daripada 2024-04-03 23:01:01
0
1
320
Pemalam Shopware 6: Cara mengalih keluar konfigurasi boolean dan memindahkannya ke konfigurasi berbilang pilih Saya mempunyai pemalam Shopware6 yang pada masa ini dikonfigurasikan dengan nilai ulasanSk...
daripada 2024-04-03 23:09:28
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！