html - 在 div 祖先中定位内联 span 标签

Question

<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 的变化？

提前致谢。

Answer 1

“翻转”的发生是因为父 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;
}

示例: http://jsfiddle.net/dGrLh/1/