关于一个浏览器样式兼容的问题_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:14 PM

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser