4

我希望我的元素通过填充它们的包含元素并在它们设置为时显示滚动条<fieldset>来表现得像 vanilla的。<div>overflow: auto

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

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

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

和相应的CSS：

.outer {
  width: 60px;
}

.inner {
  overflow: auto;
  display: block;
  height: 60px;
  border: 1px solid red;
}
4

4 回答 4

7

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

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

样式表中的设置min-width: 0;更正了 Chrome 27、Safari 6.0.2 和 WebKit Nightly r146031 中的问题。它无法纠正 Chrome 25 和 FireFox 19.0.2 中的问题。

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

于 2013-03-18T13:55:26.033 回答
2

<fieldset>不从父 div 继承宽度。.innerdiv确实继承了宽度并缩小了。您可以通过添加width: inherit作为规则来解决这个问题.inner。请注意，这<fieldset>可能还会获得一些额外的填充和边距。

http://codepen.io/anon/pen/fxjek

于 2013-03-18T13:59:14.227 回答
0

Fieldset 版本比 div 版本宽的原因是 fieldset 有自己的默认填充，除非您另有指定。

见：http: //jsfiddle.net/RDVY7/

我将此添加到您的 CSS 中：

fieldset {
    margin:0 ;
    padding:0 ;
}

它解决了这个问题。如果你想要你的字段集版本和你的 div 之间的间距，只需调整margin:元素。

于 2013-03-18T14:21:09.917 回答
0

要在您的示例中修复fieldset或使其类似于div下面的内容，请添加以下 css::

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

您需要先重置边距和填充，使其像下面的 div 一样，然后添加您想要的宽度：

.inner {    
    width:60px;    
}
于 2013-03-18T13:56:45.397 回答