首页 >web前端 >html教程 >一个不在同一行显示的问题_html/css_WEB-ITnose

一个不在同一行显示的问题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:11:391064浏览

		<hr/>        <p>css定位:relative</p>        <div class="positionObj">        	<div>对象1</div>        	<div id="relativePosition">对象2:相对于自身的相对定位<div class="absolutePosition">对象2副:相对于对象2的绝对定位</div></div>        	<div>对象3</div>        	<div>对象4</div>        </div>        <hr/>        <p>css定位:absolute</p>        <div class="positionObj">        	<div>对象A</div>        	<div class="absolutePosition">对象B:相对于body的绝对定位<div class="absolutePosition">对象B副:相对于对象B的绝对定位</div></div>        	<div>对象C</div>        	<div>对象D</div>        </div>

            .positionObj            {  	            	height: 120px;    	            }           .positionObj div            {            	font-size:10pt;            	background-color:gray;            	width: 100px;            	height: 50px;            	float: left;            	margin-right: 10px;            }            #relativePosition            {            	position: relative;            	top:60px;            	left:50px;            }            .absolutePosition            {            	position: absolute;            	left: 400px;            	display: inline;            }


对象2和对象2副怎么设置成同一行显示,对象B和对象B副也是。display:inline和float:left均无效


回复讨论(解决方案)

我把对象盒子里的文字少写点就对齐在同一行了,这和文字多少有关系吗

<!DOCTYPE html><html>	<head>		<title>Test</title>		<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />		<style type="text/css"><!--			.positionObj            {                      height: 120px;                    }           .positionObj div            {                font-size:10pt;                background-color:gray;                width: 100px;                height: 50px;                float: left;                margin-right: 10px;            }            #relativePosition            {                position: relative;                top:60px;                left:50px;            }            .absolutePosition            {                position: absolute;                left: 400px; top:0;            }		--></style>	</head>	<body>		<hr/>        <p>css定位:relative</p>        <div class="positionObj">            <div>对象1</div>            <div id="relativePosition">对象2:相对于自身的相对定位			<div class="absolutePosition">对象2副:相对于对象2的绝对定位</div>			</div>            <div>对象3</div>            <div>对象4</div>        </div>        <hr/>        <p>css定位:absolute</p>        <div class="positionObj">            <div>对象A</div>            <div class="absolutePosition">对象B:相对于body的绝对定位<div class="absolutePosition">对象B副:相对于对象B的绝对定位</div></div>            <div>对象C</div>            <div>对象D</div>        </div>	</body></html>



非得加个top或bottom才能在同一行吗 不好意思 我比较钻牛角尖

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