如何使 Fieldset 与其父级一样宽（匹配父级宽度）

Question

我们来看看这段代码：

<div style="width:100%;">
    <ul>
        <li><a>ردیف سند حسابداری</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</div>

这就是我想要的。

我希望子项不要比其父项宽，如果是，则它必须滚动。但是当我使用 fieldset 时，每件事都会混淆。看看这个：

<div style="width:100%;">
<fieldset style="width:100%;">
    <ul>
        <li><a>test</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</fieldset>

和这里的 JS Fiddle：

correct

wrong

我该怎么办？

Answer 1

<div style="width:100%; overflow-x:scroll;">
<fieldset style="width:100%">
<ul>
<li><a>test</a></li>
</ul>
<div style="width:100%">
 <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</fieldset>
</div>

你可以试试放overflow-x:scroll;在你的 div

Answer 2

Fieldset 是浏览器定义样式附带的众多标签之一，这就是我们使用 reset 的原因。

我有自己的重置，但你可以像 html5docs 一样在线选择一个（把它放在你的 CSS 文件的顶部。）

您需要重置的原因是，如果您在 Chrome 中查看 fieldset 的源代码，您会看到 Chrome 自动将这些规则应用于 fieldset.

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove threedface;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    min-width: -webkit-min-content;
}

浏览器自动将样式规则应用于某些元素的原因是因为这些元素旨在以特定方式使用，并且浏览器在那里应用常用样式，以便在将它们放置在文档中时可以识别它们的本来面目。

在您的情况下，fieldset 显示一组可由用户编辑的字段。

更新

你的问题真的不清楚。

Fieldset 是一个块级元素，您希望它表现得像内联元素，所以给它 display:inline;

Answer 3

终于找到答案了。在这里回答的朋友的回答对我很有帮助，答案离我很远！这是更正后的 html:

<div style="width:100%;">
<fieldset style="width:97%; min-width:0;">
    <ul>
        <li><a>test</a></li>
    </ul>
    <div style="width:100%; overflow-x:scroll;">
        <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</fieldset>

看到了吗？最小宽度是问题所在！我不知道它是如何混合所有东西的，但确实如此！答案 here 帮助了我（我的问题将是重复的）。

如何使 Fieldset 与其父级一样宽（匹配父级宽度）

How to make Fieldset as wide as its parent (match parent width)

html

css

fieldset