如何根据子元素大小设置div大小宽度

Question

我希望我的菜单宽度可以根据菜单项进行扩展。在我的例子中，它需要100％的页面，我希望是合适的大小。

这是我的代码和FIDDLE EXAMPLE

HTML：

<div id="menu">
    <span>Menu 1</span>
    <span>Menu 2</span>
    <span>Menu 3</span>
    <span>Menu 4</span>
</div>

CSS：

#menu {
    width: auto;
    background-color: #ccc;
}

#menu span {
    padding: 5px;
}

Answer 1

将display:inline-block;添加到#menu

#menu {
    width: auto;
    background-color: #ccc;
    display: inline-block;
}

Demo

Answer 2

您只需使用span代替div

即可

UPDATED FIDDLE

<span id="menu">
    <span>Menu 1</span>
    <span>Menu 2</span>
    <span>Menu 3</span>
    <span>Menu 4</span>
</span>

Answer 3

div默认为block个元素。但你基本上需要你的菜单inline。因此，要么div display:inline-block，要么将菜单括在span而不是div

最好这一个：

#menu{
    display:inline-block;
    width:auto;
    background-color:#ccc;
}

<强> DEMO