您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何解決谷歌瀏覽的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>
驗證碼的label和input之間的間距明顯較上面兩個大,將驗證碼代碼的換行去掉,并為一行之后,三個input框就對齊了,原因還不曉得。
PS:img和input沒有對齊以前的隨筆記錄過,只需要分別加個vertical-align:middle就行
感謝你能夠認真閱讀完這篇文章,希望小編分享如何解決谷歌瀏覽的label與input間距的問題內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。