谷歌浏览的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工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7773

Java教程

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

显示更多

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()函数会返回一个

我们如何在HTML中添加单行输入字段？ Aug 20, 2023 pm 05:45 PM

使用<isindex>标签添加单行输入字段。HTML<isindex>标签用于通过文本字段查询文档。该标签可以在任何地方使用，但最好放在head标签中。注意：这是一个已弃用的标签，不应该使用。以下是属性列表−属性值描述Prompt字符串文本字段的标签ActionURL在需要将查询发送到不同的URL时使用示例尝试下面的代码−<!Doctypehtml><html

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题