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

Question

这个问题在这里已有答案：

• fieldset width 100% of parent [duplicate] 3回答

我们来看看这段代码：

<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小提琴在这里：

correct

wrong

我该怎么办？

Answer 1

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 2

最后我找到了答案。在这里回答的朋友的答案对我很有帮助，答案离我很远！这是更正的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帮助了我（我的问题将是重复的）。

Answer 3

<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