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

correct

wrong

我该怎么办？

Answer 1

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

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

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

＆＃13;

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;
}

＆＃13;

浏览器自动将样式规则应用于某些元素的原因是因为这些元素旨在以特定方式使用，并且浏览器应用常用的使用样式，以便在放入时他们可以识别的文件。

在您的情况下，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

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

3 个答案: