Question

为什么以下示例中的max-width不起作用？

<form>
<fieldset>
    <ul>
        <li>
            <label>blah</label>
            <div>
                <input />
            </div>
        </li>
    </ul>
</fieldset>

input {
    width: 1000px;
    max-width: 100%;
}
form {
    max-width: 100%;
}

看看我的意思是让右边的窗口小于1000px（这样输入比窗口大），然后将输入的宽度切换到100％，看看它现在适合。

我要归档的内容：输入应为1000px宽，但不能像屏幕那样宽（或者在框架的jsfidde中）。

正如有人在评论中所说，父母没有任何宽度。但至少表单元素有一个宽度（设置为max-width）。而且规范有效。这里的问题是fieldset。从代码中删除字段集，它可以工作。

Answer 1

问题在于<fieldset>。它们是重置的痛苦，在Webkit和Gecko中，它们总是和最宽的孩子一样宽，忽略max-width。

您可以使用min-width: 0在Webkit中覆盖此行为，但Firefox不允许作者对其进行编辑。

我所知道的唯一解决方案是将display的{{1}}属性设置为<fieldset>。这很难看，但它确实有效。

Answer 2

<强>更新

经过一些检查后，我发现了一个默认的浏览器CSS for fieldset;

  min-width: -webkit-min-content;

只需添加以下内容即可获得所需结果;

fieldset {
    min-width: inherit;
}

Answer 3

您不能将动态值（以％表示的值）设置为'max-width'，因此您需要给出固定值。你可以将这种值赋予宽度

这是我的观点。

为什么在这种情况下max-width不起作用

3 个答案: