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

Question

我有一个包含一些内容的字段集,内容相对于其原始位置移动.看到这个jsFiddle.

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

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

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/