fieldset宽度为父级的100%

时间:2014-12-26 18:09:39

标签: html css3 fieldset

我需要在fieldset中有一个可滚动的div。我的问题是,字段集扩展到它的内容宽度,而不是保持其父级。

<div class="section">
    <fieldset>
        <div class="list">
        </div>
    </fieldset>
</div>

http://jsfiddle.net/UziTech/tg5uk25L/

这两个框的底部都应该有滚动条,但顶部的滚动条位于字段集中,因此它不会控制溢出。

如何让fieldset只能与它的父级一样宽?

3 个答案:

答案 0 :(得分:22)

浏览器在fieldset元素的默认样式表中有自定义css。

在Chrome上,它有min-width: -webkit-min-content;

您可以设置此规则:

.section fieldset{
    min-width: 0;
}

见小提琴:

http://jsfiddle.net/tg5uk25L/4/

使用Firebug,Chrome开发工具,aso检查元素,以查看样式表中divfieldset元素之间的区别!

答案 1 :(得分:0)

只需在父overflow: scroll上设置.section即可。这将包含溢出并添加滚动条。

.section {
  width: 100%;
  border: 10px double;
  box-sizing: border-box;
  overflow: scroll; <----
}

FIDDLE

答案 2 :(得分:0)

来自你的jsfiddle,也许你忘了在第二部分添加一个字段集

这是一个快速修复

.section {
    width: 100%;
    border: 10px double;
    box-sizing: border-box;
    overflow-x: auto;
}

td {
    padding: 0 100px;
    border: 1px solid;
}

http://jsfiddle.net/oussamaelgoumri/meqvbjf1/