<!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. sqlserver实现分页的几种方式

    sqlserver实现分页的几种方式 第一种:使用org.springframework.data.domain.Page来进行分页 package com.cellstrain.icell.repo ...

  2. Django入门与实践-第18章：访问已登录用户(完结)

    http://127.0.0.1:8000/boards/1/topics/1/ #boards/views.py @login_required def new_topic(request, pk) ...

  3. 右值引用和std::move函数(c++11)

    1.对象移动 1)C++11新标准中的一个最主要的特性就是移动而非拷贝对象的能力 2)优势: 在某些情况下,从旧内存拷贝到新内存是不必要的,此时对对象进行移动而非拷贝可以提升性能 有些类如IO类或un ...

  4. 20155305乔磊2016-2017-2《Java程序设计》第七周学习总结

    教材学习内容总结 第十二章 Lambda 12.1 认识Lambda语法 - Lambda 教材的引入循序渐近.深入浅出 如果使用JDK8的话,可以使用Lambda特性去除重复的信息,例: Compa ...

  5. const define static extern 关键词详解

    const const关键词并不能把一个变量变成一个常量, 在符号前加上const表示这个符号不能被赋值, 即他的值对这个符号来说是只读的, 但并不代表这个值不能用其他方法去改变. 通过下面的例子就能 ...

  6. error: libXpm.(a|so)

    centos 6.5 安装php时老是报错,找了很久答案都是千篇一律且不起作用,最后找到一个答案,特记录在此 脚本: tar zxvf php-5.3.28.tar.gz && cd ...

  7. 限制用户不能删除SharePoint列表中的条目（项目）

    概述 SharePoint列表提供了一个用于在线协作的电子表格,不同的用户可以同时在不同的地方编辑一套数据. 列表功能在收集用户信息.提供审批流程方面为办公人员提供了非常便捷的好处. 既然是协作办公, ...

  8. ASP.NET开发常用简单实用的方法

    ASP.NET开发简单实用的方法 一.打印和导出 打印和导出EXCEL在目前ASP.NET开发中可以说是必要的,有时候针对不同数据难易程度下,用有效快速的方法是解决办法的有效途径之一. 1.打印 后台 ...

  9. ASP.NET MVC Ajax 伪造请求

    1.前言 CSRF(Cross-site request forgery)跨站请求伪造,ASP.NET MVC 应用通过使用AJAX请求来提升用户体验,浏览器开发者工具可以一览众山小,就很容易伪造了请 ...

  10. ipad协议7.0，与大佬们分享几套新老版本的协议源码及算法，交流心得。