解决input和button错位（不齐）问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
padding: 20px;
background-color: pink;
margin: 30px auto;
}
input{
width: 120px;
height: 20px;
border: none;
padding: 5px;
/*vertical-align: top;*/
border: 2px solid green;
}
button{
width: 40px;
height: 34px;
border: none;
background-color: green;
padding: 0 5px;
/*vertical-align: top;*/
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<input type="text"><button type="button">查询</button>
</div>
<script type="text/javascript"> </script>
</body>
</html>
上面代码会出现这种效果：
解决方法：给两个同时加上vertical-align:top；即可，把上面代码的注释去掉即可；
最后;
解决input和button错位（不齐）问题的更多相关文章
- input 与 button 的问题 （空隙/不等高/对不齐）及 解决办法
1. input 与 button 为什么有空隙? - 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单) 1. input 与 button 都属于行级块元素,都具有文本 ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- input与button按钮背景图失效不显示的解决办法
今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- input 和 button 的 border-box 模型和 IE8 错位
用 input 和 button 时出现了几个奇怪的现象,先放几个 input 和 button CSS: * { margin:; padding:; } input,button { width: ...
- css中input与button在一行高度不一致的解决方法
在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...
- 苹果iphone手机上input的button按钮颜色显示有问题，安卓却没问题
苹果手机中会如类似上图,安卓却可以按自己写的来显示 解决办法: -webkit-appearance: none; 以上即可,当然样式中可以加上通用的: 通用:input[type=button], ...
- input、button、文字的对齐水平对齐
input.button.文字的对齐~! 1.input文本框下移的方法:padding-top ,可以解决文本框向下移. 2.input文本框和button对齐可以给他们外面加table (例如,谷 ...
- input、button、a标签 等定义的按钮尺寸的兼容性问题
在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...
随机推荐
- DevExpress TextEdit Focus问题
在标签切换时设置第一个TextEdit获取输入焦点无效,需要采用消息Post方式设置 //标签切换事件 xtraTabControl1.Selected += (s, e) => { if (e ...
- IntelliJ IDEA 2017版 springloaded实现热部署
1.配置pom.xml文档 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...
- java程序设计基本概念 jvm
JVM (1)对于字符串:其对象的引用都是存储在栈中的,如果是编译期已经创建好(直接用双引号定义的)的就存储在常量池中,如果是运行期(new出来的)才能确定的就存储在堆中.对于equals相等的字符串 ...
- momery
reg [7:0] moma [255:0] ;//定义一个位宽为8,浓度为什么256的memory. parameter wordsize = 8; parameter memsize = 256; ...
- ArcGIS Desktop python Add-in 测试一个插件
a)制作一个插件文件 先找到工作目录,双击运行makeaddin.py脚本.这个脚本拷贝所有插件需要的文件和文件夹并在工作目录形成一个压缩文件.该压缩文件名为工作目录名称加上".esriad ...
- node 问题
安装:使用.msi直接安装就好,环境变量已经设置好了 1.问题:验证node是否正确安装 办法:直接计算1+1:创建服务器. 在项目文件夹的路径下,输入node命令,会看到一个提示符,这里只能输入直接 ...
- Dwz(J-UI)框架--入门
http://www.cnblogs.com/chenyongsai/p/4933982.html Dwz(J-UI)框架--入门 一.了解 概述:是中国人自己开发的基于jQuery实现的Ajax R ...
- C# 如何防止重放攻击(转载)
转载地址:http://www.cnblogs.com/similar/p/6776921.html 重放攻击 重放攻击是指黑客通过抓包的方式,得到客户端的请求数据及请求连接,重复的向服务器发送请求的 ...
- 【转】如何使用BehaviorSDK
原文地址:http://blogs.msdn.com/b/windows8devsupport/archive/2014/10/24/behaviorsdk.aspx 前言 在开发过程中,程序员一般通 ...
- Mina的ssl加密
前面写的Mina的示例,都是可以通过telnet登录的,并且可以相互交互. 现在采用ssl加密的方式,对建立连接时,进行加密连接.这样,双方只有统一的加密,然后才可以连接. 密钥的生成之前有说过,里面 ...