文本框和按钮对不齐的两种解决方式html

方式一：

<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	input {
	height: 50px;
	float: left;
	}

	.s {
	height: 54px;
	}
	</style>
	</head>

	<body>
	<input type="text" value="文本框">


	<input type="submit" class="s">
	<input type="reset" class="s">

	<!--
	文本框和提交按钮、重置按钮高度不一样

	-->

	<!--
	按钮：
	button
	submit
	reset
	-->
	</body>

	</html>

方式二：

<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	input {
	/* 去掉自带1px的内间距 */
	padding: 0;
	/* 覆盖原本2px的边框 */
	border: 1px solid tomato;

	height: 50px;
	float: left;
	}

	button {
	height: 52px;

	/* button按钮高度要与文本框的高度一致，大2px */
	}
	</style>
	</head>

	<body>
	<input type="text" value="文本框">
	<button>按钮</button>


	<!--
	原因：
	文本框和button按钮高度差2px
	-->

	<!--
	按钮：
	button
	submit
	reset
	-->
	</body>

	</html>

文本框和按钮对不齐的两种解决方式html相关推荐

html文本框与按钮对不齐，不能挨一起的问题
文本框和按钮利用flex布局横向排列后两个问题 1.文本框.按钮没有对齐 2.文本框.按钮没有贴在一起问题1:文本框.按钮没有对齐解决办法: (1)给文本框添加vertical-align: bo ...
一、文本框和按钮不对齐现象(高度得设置一样)
一.文本框和按钮不对齐现象(高度得设置一样) input 设置左浮动 (float:left). 取消input 默认的2px边框和上下1px内边距设置1px的边框设置高 button设置高度比 ...
php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...
搜索计算机无法输入法,Windows10左下角搜索框无法输入字符的两种解决方法
用户在使用win10系统过程中,经常会使用到其自带的搜索功能.不过,近来有些用户却发现电脑左下角的搜索框突然无法输入字符.那这该怎么办呢?我们最常用的方法是重启电脑,让win10的搜索服务重新运行.下 ...
页面倒计时按钮的两种实现方式
页面倒计时按钮的两种实现方式: 现假设需求为:点击打开页面后,让用户阅读本页面内容并进行60s倒计时,倒计时结束后用户才可以点击"确定"按钮,进行页面跳转. ①第一种实现方式,打开 ...
计算机搜索没办法打汉字,Win10左下角搜索框无法输入字符的两种解决方法
用户在使用 win10系统过程中,经常会使用到其自带的搜索功能.不过,近来有些用户却发现电脑左下角的搜索框突然无法输入字符.那这该怎么办呢?我们最常用的方法是重启电脑,让win10的搜索服务重新运行 ...
css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.
android密码dakay,安卓中按钮点击事件onClick的两种实现方式
很多的语言都有一些共同的特点,比如OnClick这个东西,可能我们能在js中见到,当然在安卓中也有,可能其他的编程语言也会有这个东西,刚好今天学了这个玩意在安卓中的写法. 点击事件大多用在Button ...
位置在此计算机上运行程序灰色,Win10电脑中定位服务按钮灰色无法开启的2种解决方法...
在win10系统中自带有定位功能,这是系统收集数据的一个途径,很多应用会用到定位功能,比如地图应用就会用到我们的定位,所以我们就需要手动来开启定位服务,不过有win10系统用户反映说操作中心的定位按钮 ...

文本框和按钮对不齐的两种解决方式html

文本框和按钮对不齐的两种解决方式html相关推荐

最新文章

热门文章