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

Question

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

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

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

Answer 1

也许你可以将display:inline-block;添加到fieldset的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

您可以将其设为inline-block：http://jsfiddle.net/XDMfN/49/

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

Answer 3

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

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