我想做一个按钮提交的布局，如下代码，在Chrome17和IE9下显示没问题，input跟button可以显示在同一条线上，不过在Firefox13.0.1和Opera12.01下，按钮Button却会突出向上，input和Button不显示在同一条线上，想问下各位大神，这个兼容Firefox和Opera(这个不支持也无所谓)的CSS该怎么写，使得input和button可以显示在同一条线上，谢了
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>Test</title><style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px;}#main .btn { margin: 0px; height: 32px; border: 1px solid #C7CCD1; font-size: 14px;}</style></head><body> <div id="main"> <input type="text" class ="inp" /><button class ="btn" type="button">提交</button> </div></body></html>
<style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px; float:left;}#main .btn { margin: 0px; height: 32px; line-height:32px; border: 1px solid #C7CCD1; font-size: 14px; float:left;}</style> CSS code
有个问题，我对btn加个宽度，例如“width：150px”，按钮会排到input标签下面去了
因为你的容器
#main {
width: 300px;
只有300宽啊，
150px+200px;放不下啊
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
