简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

谷歌瀏覽的label與input間距問題該如何解決

php中世界最好的语言
發布： 2018-02-03 10:07:19
原創
2824 人瀏覽過

這次帶給大家谷歌瀏覽的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>
登入後複製

驗證碼的label和input之間的間距明顯較上面兩個大，將驗證碼代碼的換行去掉，並為一行之後，三個input框就對齊了，原因還不曉得。

PS：img和input沒有對齊以前的隨筆記錄過，只需要分別加個vertical-align:middle就行 

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼解決textarea標籤大小不可變不能透過滑鼠拖曳的方式來拖曳的問題

如何使用CSS對TD中INPUT的寬度設定

怎麼實作meta標籤中的viewport來控制裝置螢幕的css屬性

單選和多選按鈕如何為圖片加上樣式

#

以上是谷歌瀏覽的label與input間距問題該如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
input 間距
來源：php.cn
上一篇：meta的標籤有哪些作用 下一篇：如何透過disabled和readonly將input設定為唯讀效果
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
無法從網站取得輸入元素 所以我試圖從Twitter獲取一個輸入元素，但當我運行它時，它不斷在節點終端中給我一個這樣的錯誤，結果，由此代碼創建的瀏覽器窗口將自行關閉，因為它找不到正確的輸入選擇器。如何取得正...
來自於 2024-04-06 18:59:57
0
1
442
供應商特定偽元素上的 JavaScript 懸停事件 我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
透過迭代顯示嵌套的物件數組在HTML表格中 我有一個包含巢狀物件數組的以下input。 summary是父級物件數組，run_type是巢狀的物件數組。 letinput={"summary":[{&qu...
來自於 2024-04-05 14:11:42
0
1
1373
讓反應渲染輸入的結束標籤？ 我有一個不尋常的要求。我的網站是使用React建立的，我希望人們能夠將公共網站的HTML複製到自己的React元件中。我遇到的唯一問題是輸入在由React渲染時沒有結束標記。這兩個...
來自於 2024-04-03 23:01:01
0
1
320
Shopware 6 外掛程式：如何刪除布林配置並將其遷移到多選配置 我有一個Shopware6插件，目前使用布林配置reviewSkipModeration值，該值自動發布透過插件提交的任何評論：config.xml<input-fieldt...
來自於 2024-04-03 23:09:28
0
1
410
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！