<!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错位（不齐）问题的更多相关文章

  1. input 与 button 的问题 （空隙/不等高/对不齐）及 解决办法

    1. input 与 button 为什么有空隙? - 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)     1. input 与 button 都属于行级块元素,都具有文本 ...

  2. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  3. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

  4. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  5. input 和 button 的 border-box 模型和 IE8 错位

    用 input 和 button 时出现了几个奇怪的现象,先放几个 input 和 button CSS: * { margin:; padding:; } input,button { width: ...

  6. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  7. 苹果iphone手机上input的button按钮颜色显示有问题，安卓却没问题

    苹果手机中会如类似上图,安卓却可以按自己写的来显示 解决办法: -webkit-appearance: none; 以上即可,当然样式中可以加上通用的: 通用:input[type=button], ...

  8. input、button、文字的对齐水平对齐

    input.button.文字的对齐~! 1.input文本框下移的方法:padding-top ,可以解决文本框向下移. 2.input文本框和button对齐可以给他们外面加table (例如,谷 ...

  9. input、button、a标签 等定义的按钮尺寸的兼容性问题

    在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...

随机推荐

  1. python的基础操作2

    一 字符串格式化 占位符 %s和%d %s是属于字符串的占位符,而%d是属于数字类型的占位符 #占位符 %s %d # a="我叫%s,年龄%d,就是一个%s"%("al ...

  2. 2018.10.19 bzoj1057: [ZJOI2007]棋盘制作（悬线法）

    传送门 悬线法板题. 如果只求最大矩形面积那么跟玉蟾宫是一道题. 现在要求最大正方形面积. 所以每次更新最大矩形面积时用矩形宽的平方更新一下正方形答案就行了. 代码: #include<bits ...

  3. 2018.07.08 NOIP模拟 好数（线段树）

    好数 题目背景 SOURCE:NOIP2016-AHSDFZ T3 题目描述 我们定义一个非负整数是"好数",当且仅当它符合以下条件之一: 1. 这个数是 0 或 1 . 2. 所 ...

  4. tp5月统计的bug

    月统计求和时 本月第一天没有统计到

  5. 电信网上营业厅-客户充值缴费时间段数据挖掘--spss

    最近研究分析了“云南电信网上营业厅”e9宽带续约缴费的数据,目前宽带续约量为171人,今天需要谈论的是:如何利用SPSS挖掘出“客户充值缴费的时间段”客户喜欢在哪个时间段来网厅进行充值缴费 云南电信网 ...

  6. MVC 图片上传（转）

    转自:http://www.cnblogs.com/Tiramisu/archive/2009/02/06/1385405.html MVC 上传图片   直接上代码: 页面:Index.aspx C ...

  7. Robot Perception for Indoor Navigation《室内导航中的机器人感知》

    Felix Endres 论文下载 Technische Fakult¨ atAlbert-Ludwigs-Universit¨ at Freiburg Betreuer: Prof. Dr. Wol ...

  8. C++主流编译器整理（编译器版本--供应商--C++11支持情况）

    C++标准   年份 C++标准                俗称   备注 2011 ISO/IEC 14882:2011     C++11  第三个C++标准 2007 ISO/IEC TR ...

  9. Spring Boot 2 实践记录之 使用 Powermock、Mockito 对 UUID 进行 mock 单元测试

    由于注册时,需要对输入的密码进行加密,使用到了 UUID.sha1.md 等算法.在单元测试时,使用到了 Powermock,记录如下. 先看下加密算法: import org.apache.comm ...

  10. 初识powershell、nuget powershell 调试

    初识powershell.nuget powershell 调试 补充 此文仅当做powershell的初步认识体验,关于nuget包里此脚本的使用官方已在vs2017停止支持,请看此文文末 前言 老 ...