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

WBOY
Freigeben: 2016-06-24 12:14:38
Original
874 Leute haben es durchsucht

我想做一个按钮提交的布局,如下代码,在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>
Nach dem Login kopieren


回复讨论(解决方案)

<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>
Nach dem Login kopieren



加二个浮动就可以

CSS code

有个问题,我对btn加个宽度,例如“width:150px”,按钮会排到input标签下面去了

因为你的容器
#main {
    width: 300px;

只有300宽啊,
150px+200px;放不下啊

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage