Html 如何制作字段集`显示：块；溢出：自动显示滚动条？

我希望我的

元素的行为像香草

一样，当它们设置为

溢出：auto

时，填充它们的包含元素并显示一个滚动条

例如，我不明白中的字段集为什么比其包含的div宽：

<div class=outer>
  <fieldset class=inner>
      fooooooooooooooooooooooooooooooooooooo
  </fieldset>
</div>

<div class=outer>
  <div class=inner>
    fooooooooooooooooooooooooooooooooooooooo
  </div>
</div>

事实证明，罪魁祸首（在某些情况下）是webkit中设置的用户代理样式表：

fieldset {
  min-width: -webkit-min-content;
}

在样式表中更正了Chrome 27、Safari 6.0.2和WebKit Nightly r146031中的问题。它无法纠正Chrome 25和FireFox 19.0.2中的问题

---

无论哪种方式，这都不能解决问题。

要修复您的

字段集

，或使其与示例中它下面的

div类似，请添加以下css:：

fieldset{
  margin:0px;
  padding:0px
}

您需要先重置边距和填充，使其与下方的div相似，然后添加所需的宽度：

.inner {    
    width:60px;    
}

不会从父div继承宽度。
.inner
div会继承宽度和宽度。您只需将
width:inherit
作为规则添加到
.inner
，即可解决此问题。请注意，
还可能获得一些额外的填充和边距

字段集版本比div版本宽的原因是
除非您另行指定，否则字段集有自己的默认填充

见：

我将此添加到您的CSS中：

fieldset {
    margin:0 ;
    padding:0 ;
}

它解决了这个问题。如果需要字段集版本之间的间距
对于div，只需调整
边距：
元素。
默认情况下，任何元素都不会继承宽度。
div.inner
被约束为其父级的宽度，但它本身不会从其父级继承
width:60px
。另外，在Firefox上指定
width:inherit
似乎没有什么不同。@BoltClock可能不是默认情况，但您能否解释
内部
div的行为，该div的宽度为58px，没有任何附加规则？因为所有边上都有1px边框，高度和宽度被限制为58px，以使其适合其父项。@Boltclock为什么字段集不受限制？这我无法解释-字段集在CSS方面是一个奇怪的野兽。@aaronstacy:你不能接受你的答案；-）因为它在任何情况下都不起作用Firefox@ExplosionPills这在chrome中确实适用，它们的宽度相同，只是字段集的UA样式表定义了边距/填充。@WalterTross true，我现在正在仔细研究它。@ExplosionPills我看到它在chrome 27、Safari和WebKit夜间bulds中起作用，但你是对的，它在chrome 25（稳定版）中不起作用。至少在MacOSX上是这样。我也找不出一个方法让它在FireFox上工作。这太愚蠢了。我可能会接受你的答案，但只需在我的应用程序中使用
。问题是我希望字段集通过扩展到其包含元素的宽度来表现为div。在我提供的代码笔中，字段集大大大于div。这不仅仅是边距/填充问题，这是因为div被钳制在其包含的元素上，而字段集正在扩展到它之外。通过检查firebug或chrome开发工具中的元素，您可以看到它远不止是边距/填充。
fieldset {
    margin:0 ;
    padding:0 ;
}