如何显示这个 div 内联包装列表 <ul> 菜单？答案

【问题标题】：how can I display this div inline wrapping a list <ul> menu?如何显示这个 div 内联包装列表 <ul> 菜单？
【发布时间】：2013-08-19 14:41:28
【问题描述】：

我有一个简单的 css 菜单列表，我想将它包装在一个 div 中并在其周围放置一个边框。您可以在下面的链接中看到默认情况下边框采用最大宽度而不是环绕菜单列表。

#cont
{
border: 4px solid #90bade;
display: inline;
overflow: hidden;
}

MY FIDDLE

我尝试将此 div 的显示模式设置为内联并在 div 上使用溢出：隐藏样式。它修复了 div 边框以完美包裹我的列表但同时它阻止了菜单下拉操作。

更新 #1： 正如 Ritabrata 的回答中所指出的，缺少位是 display:inline-block; 并且不需要溢出：隐藏；

#cont
{
border: 4px solid #90bade;
display: inline-block;
}

【问题讨论】：

标签： css html

【解决方案1】：

你的 css 中的几个变化 ::

#cont
{
border: 4px solid #90bade;
overflow:hidden;
width:auto;
display:inline;
}

#nav
{
position: relative;
padding: 0;
margin: 0;
display:inline-block;
}

UPDATED FIDDLE

LEARN MORE ABOUT display: HERE

【讨论】：

thanks 似乎只是添加了 display:inline-block;在这里就足够了。我需要溢出：隐藏吗？
是的..如果它是正确的答案..请选择正确或不满意你可以告诉我
太好了，我会在我的帖子中添加注释。
刚刚更新了我的帖子。早些时候我试图通过设置溢出来实现这一点，这可能不是首先要走的路。正如您在回答中指出的那样，这里的关键是使用 inline-block
让我们continue this discussion in chat