div width自动调整其内容

Question

我有以下代码：http://jsfiddle.net/domoindal/fkcQK/

我需要的是边框在菜单栏中符合其内容，因此如果有三个标签，则此div的宽度应该适合三个标签宽度的总和。我不希望标签周围的边框获得最大宽度。

后来，我想得到的是在产生的不规则形状周围创建阴影，而不是盒子。

有可能按我的意愿去做吗？

感谢。

Answer 1

摆脱宽度：自动位并在菜单div中添加一个display：inline-block： -

http://jsfiddle.net/fkcQK/2/

Answer 2

尝试使用float

http://jsfiddle.net/fkcQK/1/

Answer 3

您的width: auto;属性无效，因为<div>是一个块元素并自动填充其父级的宽度。在浏览器的内置样式表中有一个定义，表示div { width: auto; display: block; }你的CSS没有任何改变。

你想要的是在我刚刚找到的这个jsFiddle中完成的：http://jsfiddle.net/loktar/seB5F/

它使父position: absolute;没有定义任何位置坐标，因此元素的框适合其内容（因为它没有父填充），但这确实从文档的流中删除元素所以你会需要为附近的元素分配边距或填充以掩盖这一事实。

HTH。

小注意事项：将来，请考虑制作导航菜单（概念上是列表）<ul>元素而不是通用<div>。