谷歌瀏覽的label與input間距問題該如何解決-html教學-PHP中文網

首頁

web前端

html教學

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

php中世界最好的语言

Feb 03, 2018 am 10:07 AM

input 間距

這次帶給大家谷歌瀏覽的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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1250

Related knowledge

laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法：1、找到並開啟Blade模板檔案；2、在Blade模板中使用method_field方法來建立隱藏域，其建立語法為「{{ method_field('DELETE') }}」。

vue3怎麼封裝input元件和統一表單數據 May 12, 2023 pm 03:58 PM

準備工作用vuecreateexample建立項目，參數大概如下：用原生input原生的input，主要是value和change，資料在change的時候需要同步。 App.tsx如下：import{ref}from'vue';exportdefault{setup(){//username就是資料constusername=ref('張三');//輸入框變化的時候，同步資料constonInput=;return( )=>({

點選input框沒有遊標怎麼辦 Nov 24, 2023 am 09:44 AM

點選input框沒有遊標的解決方法：1、確認輸入框焦點；2、清除瀏覽器快取；3、更新瀏覽器；4、使用JavaScript；5、檢查硬體設備；6、檢查輸入框屬性；7、調試JavaScript程式碼；8、檢查頁面其他元素；9、考慮瀏覽器相容性。

word間距如何調整 Mar 19, 2024 pm 07:10 PM

word間距的內容包括字間距和行間距，間距的調整在文件中有很重要的地位，影響整體的排版，文字呈現形式，合理的word間距可以使文件內容顯得整潔不緊湊，增加合理視覺效果。希望今天小編的講解可以為大家排憂解難，解決關於word間距的調整問題。調整行間距的步驟如下：1.如圖所示，開啟需要進行調整的word文檔，將要調整行間距的內容都拖選住後按右鍵，選擇段落選項。 2.在彈出的對話框找到間距選項，隨後點選行距下拉列表，選擇自己需要的行距大小。選擇後點選確定，選擇的內容行間距都調整了。調整字間距的步驟如下:

Vue文件中的input框綁定事件詳解 Jun 21, 2023 am 08:12 AM

Vue.js是一種輕量級的JavaScript框架，具有易用、高效和靈活的特點，是目前廣受歡迎的前端框架之一。在Vue.js中，input框綁定事件是十分常見的需求，本文將詳細介紹Vue文件中的input框綁定事件。一、基礎概念在Vue.js中，input框綁定事件指的是將輸入框的值綁定到Vue實例的資料物件中，從而實現輸入和回應的雙向綁定。在Vue.j

Vue文檔中的input框回車事件和驗證函數使用方法 Jun 20, 2023 am 09:13 AM

Vue是一個流行的JavaScript前端框架，它的核心是響應式資料綁定和元件系統。在Vue的應用程式中，input框是最常用的UI元素之一。在使用者輸入文字時，我們希望可以監聽回車事件，並且在提交前對輸入內容進行驗證。本篇文章將介紹Vue文件中的input框回車事件和驗證函數使用方法。一、Vue中input框回車事件在Vue中監聽input框的回車事件非常簡

使用Python的input()函數從使用者取得輸入 Aug 22, 2023 am 11:21 AM

標題：使用Python的input()函數從使用者取得輸入在編寫程式時，經常需要從使用者取得輸入。 Python提供了一個內建函數input()，可以用來取得並接收使用者的輸入。本文將介紹如何使用input()函數以及一些常見的應用場景。 input()函數用法非常簡單，它接受一個可選的提示訊息作為參數，並等待使用者輸入。使用者輸入之後，input()函數會傳回一個