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

Question

我有一个包含一些内容的字段集，这些内容相对于它们的原始位置移动了。看这个jsFiddle .

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

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

Answer 1

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

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

这是否实现了您的意思？不过，较旧的浏览器应该坚持 display:inline;。

编辑:好的，有了新的 fiddle ，我看到了你想要实现的目标。我想在这种情况下你必须使用 javascript 来调整高度 - 如果它适合你的话。

这是一个例子:

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

只需将 id="myfieldset" 添加到您的字段集中，使其在您的示例中起作用。

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