在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中注释掉的部分。如果启用该功能，则视图"跳出"，小部件头完全消失。为什么会发生这种情况?定位这些标签的最佳方法是什么，以使样式易于维护并能够适应未来的更改?

提前感谢。

Answer 1

发生'翻转'是因为父div没有宽度或高度，因为它的span子div具有绝对位置。为了解决这个问题，你可以给div一个固定的高度

.widget-header{ 
    height:50px; 
    width:500px; 
}

例子: http://jsfiddle.net/dGrLh/2/

或者浮动span而不是绝对位置，如:

.widget-title { 
    width: 30%;
    float:left;
}
.widget-menu { 
    float:right;
}

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