Question

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

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

MY FIDDLE

我试图将此div的显示模式设置为内联并在div上使用overflow：hidden样式进行播放。它修复了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;
}

<强> UPDATED FIDDLE

<强> LEARN MORE ABOUT display: HERE

如何显示此div内联包装列表<ul>菜单？</ul>

1 个答案: