连续input在同一行对齐问题

今天遇到这个问题,我是想达到这个效果:

写了如下代码:

<style>
input{
    outline:none;
    margin:0;
    padding:0;
}
#serch_box{
    width:210px;
    height:38px;
    border:1px solid #ccc;
    border-right:none;
}
#serch_btn{
    background:url(index/images/serch_btn.png);
    width:104px;
    height:40px;
    border:none;
}
</style>
</head>

<body>
<input id="serch_box" type="text" />
<input id="serch_btn" type="button" />
</body>

该代码在FireFox下显示是这样:

搜索框和按钮之间有个间距,怎么也拿不掉。

在chrome下是显示这样:

把你们放一块还若即若离同行不同心是什么意思。

尝试margin、padding等方法也不能解决窜位的问题。

最后给两个input加了个浮动,问题解决。

时间: 2024-10-12 15:27:31

连续input在同一行对齐问题的相关文章

input与lable水平对齐

CSSinput,label { vertical-align:middle;}  html 格式 <label><input/></label> <label><input/></label> input与lable水平对齐

输入框input和旁边按钮对齐的解决方案

问题: 最近在写一个电商网站的静态页面练手,遇到了一个特别奇怪的现象,如下图: 输入框和旁边的搜索框没法对齐,于是乎百度解决方案,各种说法都有,但是没有一个是自己认为切实可行的或者是说得比较简单易懂的. 或许是我理解起来比较慢吧,呵呵. 下面直接进入正题之解决方案: [本解决方案借鉴了百度首页搜索框的写法] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

小程序 图片和文字放在一行对齐的方法

<view class='setting' bindtap='jumpLogin'> <image class='btnImg' src='../image/setting.png' style="width:40rpx;height:40rpx;"></image> <text style="font-size:0.8rem;color:#0AAAF6">切换账号</text> </view>

两个input放一行不能对齐

若两个input都是text属性,并且不设置字号大小,那么两个input可以在一行 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>aa</title> <met

文字和img、input并排无法对齐的问题

文字和img.input并排在一行的时候,img和input位置总是会偏移一点,input就用复选框和按钮举例,如下图: 只要在img和input样式加上vertical-align:middle;就可以垂直居中了,效果如下图: 复选框在firefox.ie6和ie7下面还是有一点点偏移,追求完美的话,可以用float:left和!important分别调整.当然一般情况下尽量少用!important,为了完美嘛. 这里还有一个办法,刚刚查到的文章,已转载到博客(后面一篇),就将font-fam

关于label和input对齐的那些事

input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div>     <label>我是中国人</label>     <input type="text"></div> 但是经常设计图中有label的行高,或者input的高度设计,默认状态下,依然是居中的.但是很多时候label和input要浮动,一旦浮动,后面的input标签就紧紧的贴住了label标签,也就造成了视觉上看到并没有居

CSS深入之label与input对齐!

我想很多人都会碰到label与input 对齐的问题. 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼. 参考各大门户网站的前端源码. 得一方法,以记录之: html确实很简单: 帐号 输入用户帐号. 密码 输入用户密码. CSS如下: label{ display: inline-block; padding: 0 10px; vertical-align: middle; } input{ outline: none; border: 1px solid rgb(216, 216

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

Codevs2155连续和题解

题目描述 Description 给定n个数 a1,a2,...,an 定义 f(i,j)=ai+ai+1+ai+2+...+aj?1+aj(1≤i≤j≤n) 求 f(i,j) 的最大值 n≤106;?1000≤ai≤1000(1≤i≤n) 输入描述 Input Description 第一行有1个数,n 第二行有n个数,a1,a2,...,an 输出描述 Output Description 输出只有一行,f(i,j)的最大值 样例输入 Sample Input 7 3 6 -8 9 -12