连续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下是显示这样:

连续input在同一行对齐问题

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

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

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

你可能感兴趣的:(input)