html - 如何使 Fieldset 与其父级一样宽(匹配父级宽度)

Question

让我们看一下这段代码:

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

这就是我想要的。

我希望子级不比其父级宽，如果是，则它必须滚动。但是当我使用字段集时，一切都会变得困惑。看看这个:

<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

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

我有自己的重置，但您可以在线获取，例如 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 是一个 block 级元素，您希望它表现得像内联元素，因此给它 display:inline;