如何使用 CSS 使字段集适合其内容的大小？

Question

我有一个包含一些内容的字段集，并且内容相对于其原始位置移动。请参阅此 jsFiddle。

当我进入 Stack Overflow 并搜索我的问题时，我很高兴：我认为 这个问题就是答案。然而，这个问题只涉及宽度（将字段集的宽度缩小到内容的大小，将显示更改为内联，或类似的东西）。

如何将字段集缩小到内容的大小？ 即，我希望当字段集的内容向上移动时，字段集的高度也缩小。

Answer 1

也许您可以将 display:inline-block; 添加到字段集的 css、f.ex。在你的例子中：

fieldset{
    border: solid 2px blue;
    display:inline-block;  
}

这能达到你的意思吗？不过，较旧的浏览器应坚持使用 display:inline; 。

编辑：好的，用新的小提琴我明白你想要实现什么。我想在这种情况下你必须使用 javascript 来调整高度 - 如果它适合你。

下面是一个示例：

window.addEvent('domready', function() {
    $('myfieldset').setStyle('height', $('myfieldset').getStyle('height').toInt() - 20);
});

只需将 id="myfieldset" 添加到您的字段集即可使其在您的示例中工作。

链接到此解决方案： http://jsfiddle.net/rMrLe/

Answer 2

您可以将其设为内联块：http://jsfiddle.net/XDMfN/ 49/

或内联（对于 IE）：http://jsfiddle.net/XDMfN/50/

Answer 3

这是不可能的，因为 position:relative 使元素正常渲染，然后移动，因此 fieldset “认为”元素处于正常渲染状态。

动态解决此问题的唯一真正选择是使用 Javascript，如 jsFiddle 所示，它使用 jQuery更改 height CSS 属性。