<div class="widget-header">
<span class="widget-title">
Widget 1
</span>
<span class="widget-menu">
<span class="btn change-col">
To Main
</span>
</span>
</div>
鉴于上面的 html,我希望 span.widget-title
和 span.widget-menu
与 widget-title
内联> 左对齐和 widget-menu
右对齐。目前,我有以下 css:
.widget-header {
position: relative;
background-color: orange;
border-radius: 5px;
}
.widget-title {
width: 30%;
position: absolute;
top: 0px;
left: 0px;
}
.widget-menu {
width: 50%;
/*position: absolute;
top: 0px;
right: 5px;*/
}
注意 .widget-menu 的注释掉的部分。如果我启用它,则 View “翻转”并且小部件标题完全消失。为什么会发生这种情况,放置这些标签的最佳方式是什么,以便样式可维护并能够适应 future 的变化?
提前致谢。
最佳答案
“翻转”的发生是因为父 div 没有宽度或高度,因为它的 span 子元素具有绝对位置。要解决这个问题,你可以给 div 一个固定的高度
.widget-header{
height:50px;
width:500px;
}
示例: http://jsfiddle.net/dGrLh/2/
或者 float 跨度而不是绝对位置,如:
.widget-title {
width: 30%;
float:left;
}
.widget-menu {
float:right;
}
关于html - 在 div 祖先中定位内联 span 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7407553/