一个不在同一行显示的问题_html/css_WEB-ITnose-html tutorial-php.cn

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

WBOY

Lepaskan： 2016-06-24 12:11:39

asal

1065 orang telah melayarinya

		<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>

Salin selepas log masuk

            .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;            }

Salin selepas log masuk

对象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>

Salin selepas log masuk

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