Question

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

我想知道如何让我的菜单栏包装列表项。我试过了width:auto，但我无法让它发挥作用。如果您有解决方案，可以在我的JSFiddle中提供吗？

Answer 1

在这里：JSFiddle

为了对容器产生“收缩包装”效果，最简单的方法是将其显示设置为内联块。

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

接下来，为了让它居中，添加text-align：center;到容器。

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

Answer 2

我不确定我是否遗漏了一些东西，但我能够使用width:100%获取菜单项。以下是修改后的JSFiddle。

这是相关的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;
    }

如何使菜单的宽度等于所有列表项的宽度

2 个答案: