Html 在主/父div中对中2个不同大小的div

我有两个菜单需要集中在一个菜单栏上。需要在IE7、IE8、IE9、Chrome、FF中运行良好。例如，我根据铬的测量值为这两种颜色添加了宽度/高度

大菜单：

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:578px;height:32px;">Foo foo</div>
</div>

福福

小菜单：

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

福福

我尝试将样式设置为#inner{width:50%；margin:auto；}，如中所述，但有一个菜单大于50%，因此会被剪裁。小的挂在左边20像素。在原型期间，我们使用jQuery对其进行了攻击，但这并不可取，因为加载后菜单会跳转

想法？

可能的解决方案 彩色边框用于解释。

862px>800px，因此它们不能放在一行中。 查看示例的较小菜单：

通缉HTML

---

我认为斯马马蒂有一个很好的解决方案。我提出了或多或少相同的东西，唯一的区别是我删除了所有的内联样式

HTML：

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

---

将代码放入并显示问题我将双

id=“内部菜单”

转换为

类

-您可以选择两个ID，并在CSS文件中设置菜单的

宽度

和

高度

（更好的样式/实践）。欢迎使用堆栈溢出！虽然这可以从理论上回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。我已经修复了我的帖子，感谢大家的提醒和热情欢迎^^

#outer-menu-bar {
    text-align: center;
}

.inner-menu {
    display: inline-block;
}

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

#outer-menu-bar
{
    text-align:center;
    background:#900;
}

.inner-menu
{
    display:inline-block;
    background:#ccc;
}