Rumah >hujung hadapan web >html tutorial >关于一个浏览器样式兼容的问题_html/css_WEB-ITnose
关于一个浏览器样式兼容的问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:14:38910semak imbas
我想做一个按钮提交的布局，如下代码，在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;放不下啊
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何设置一段文字，是它的宽度是页面宽度的62%且能自动换行？_html/css_WEB-ITnoseArtikel seterusnya：想把一个DIV放到一个大DIV的右下角该怎么办？该大DIV包含两个并列的DIV_html/css_WEB-ITnose