如何使div的宽度适合内容而不是窗口

Question

在下面的代码中,如何使"#wrap"宽度适合其子宽度,而不是限制浏览器窗口界限？

HTML

<div id="wrap">WRAP
    <div id="menu">MENU</div>
    <div id="large-content">LARGE CONTENT</div>
</div>

CSS

#wrap{background: #eee;}
#large-content{background: #f1c40f; width: 1000px; height: 300px}
#menu{background: #2c3e50; width: 100%; height: 50px}

的jsfiddle

https://jsfiddle.net/67egnpho/1/

Answer 1

孩子的宽度是100%所以目前适合它.

添加display: inline-block;将使其与内容保持一致.

#wrap{background: #eee; display: inline-block;}