css - 如何显示这个 div 内联包装列表菜单？

Question

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

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

我的小提琴

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

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

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

Answer 1

您的 CSS 中的几个更改 ::

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

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

更新的小提琴

了解更多关于显示：这里