Maison > Article > interface Web > 一个不在同一行显示的问题_html/css_WEB-ITnose
一个不在同一行显示的问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:11:391025parcourir
<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才能在同一行吗 不好意思 我比较钻牛角尖
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：请问下列代码是什么意思？这两段代码作用是一样的吗？_html/css_WEB-ITnoseArticle suivant：求助border-radius问题_html/css_WEB-ITnose