html – in fieldset不遵守“overflow：auto”指令

2023年4月20日 157次阅读

这是一个测试用例：

<!doctype html>
<html>
<body>
    <div style="margin: 0 auto; width: 950px; overflow: hidden;">
        <div style="float: left; width: 660px">
            <form><fieldset>
            <pre style="overflow: auto">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test </pre>
            </fieldset></form>
        </div>
        <div style="float: right; width: 260px">
            Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 
        </div>
    </div>
</body>
</html>

我想要< pre>中的代码显示滚动条而不是溢出到“Lorem Ipsum”侧边栏.如果它在< fieldset>中(如例子中)它溢出.

如果您删除< form>< fieldset>它不会再溢出,但它也不会显示滚动条(溢出的文本只是被剪裁).

这就是我想要的：

>如果< pre>中的文字它应该不会溢出到“Lorem Ipsum”并且它应该显示一个滚动条,它是否在< fieldset>中.或不.

最佳答案 它遵守它,但在它的默认行为的背景下.它当前没有宽度,并且< pre>的默认行为是没有宽度(而是扩展到可用空间……并且它的父母愿意扩展以适应它)所以它的行为是正确的.

如果你想要它适合,只需给它与父母相同的宽度,如下所示：

<pre style="overflow: auto; width: 660px;">
点赞