Css 如何制作菜单'；s宽度等于所有列表项的宽度

我有这个网站，我目前有我的菜单设置为像素宽度。问题是，在某些屏幕分辨率上，菜单栏的宽度不同

---

我想知道如何让我的菜单栏包装列表项。我已经试过了

width:auto

，但我无法让它工作。如果你有一个解决方案，你能在我的JSFIDLE中提供吗？

我不确定我是否遗漏了什么，但我能够使用

宽度：100%

将菜单项包装起来。这是修改后的

以下是相关的CSS：

#menu {
        width: 100%;
        margin: 30px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: -moz-linear-gradient(#444, #111); 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#444, #111);  
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

给你：

为了在容器上具有“包覆面提取”效果，最简单的方法是将其显示设置为“内联块”

ul#menu {
    display: inline-block !important;
}

下一行，要使其居中，请添加文本align:center；到集装箱

#menu-wrap {
    text-align: center;
}

---

我希望菜单的宽度等于所有列表项的宽度。您提供的示例使菜单的宽度延伸到整个屏幕。有没有办法让菜单“包装”列表项并停留在中间？注意使用！重要的是，必须添加这些元素，因为存在针对同一元素的冲突规则（这从来都不是一件好事）。考虑用这个解决方案重构代码。