两个div并排,一个居中,另一个向右浮动

Question

令人尴尬的是,我无法让一个div(任何长度)居中,一个div(任意长度)漂浮在右边.所以我有一个带有菜单按钮的容器,它们位于中心,右侧是用户控制面板的链接.看起来应该是这样的

 ----------------------------------------------------------------------------
|                       |----Menu Items----|                |--ControlPanel--|
 ----------------------------------------------------------------------------

我知道,这个问题可能已被问过几次,但我一直在搜索,他们似乎都依赖于百分比或固定宽度.

我有一个容器

.container {
    height: 50px;   
    width: 100%;
    padding: 10px 10px;
}
.menublock {
    width: 200px;
    margin: 0 auto;
    padding: 0;
}
.controllinks {
    float:right;    
}

HTML是这样的

<div class="container">
    <div class="menublock">
        <span class="menuitem">Streams</span>
        <span class="menuitem">Profile</span>
        <span class="menuitem">Friends</span>
    </div>
    <div class="controllinks">
        A link the users control panel
    </div>
</div>

通过将menublock和controllinks更改为display:inline-block(或内联),我可以将它们放在同一条线上就好了..menublock 似乎不喜欢在这个显示器中居中并且margin: 0 auto;不起作用.我正在搞乱,.menublock display:table但不想留在同一排.

Answer 1

也许是太容易了,所以你甚至没有尝试,但这个定格在我的测试文件的东西:只是交换的顺序<div class="controllinks">和<div class="menublock">:

<div class="container">
    <div class="controllinks">
        A link the users control panel
    </div>
    <div class="menublock">
        <span class="menuitem">Streams</span>
        <span class="menuitem">Profile</span>
        <span class="menuitem">Friends</span>
    </div>
</div>