Maison >interface Web >tutoriel HTML >关于一个浏览器样式兼容的问题_html/css_WEB-ITnose

关于一个浏览器样式兼容的问题_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:14:38908parcourir

我想做一个按钮提交的布局,如下代码,在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;放不下啊

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn