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

Question

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

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

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

score 6 · Accepted Answer

也许您可以添加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/

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

3 回答 3