ホームページ > ウェブフロントエンド > htmlチュートリアル > 同一行に表示されない問題_html/css_WEB-ITnose

同一行に表示されない問題_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:11:39
オリジナル
1066 人が閲覧しました

		<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 は両方とも無効です


ディスカッションへの返信 (解決策)

テキストを少なくして、オブジェクトボックス内のテキストを同じ行に揃えました。これは量と関係がありますか。




同じ行に入れるには、上と下を追加する必要がありますか? 申し訳ありませんが、私は少しこだわりがあります。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート