DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!
min-width
属性在 CSS 中用于设置指定元素的最小宽度。min-width
属性始终会覆盖 width
属性,无论是在声明中 width
之前还是之后。作者可以使用任何 长度值,只要它们是正值。
.wrapper {
width: 100%;
min-width: 20em; /* Will be AT LEAST 20em wide */
}
Check out this Pen!
在假设 min-width
被继承时要小心,因为此属性不会从其他父元素继承。如果作者使用绝对值 (px、pt、in、cm、mm) 定义宽度,则最小宽度将不会生效,因为宽度已无限期定义。例如,如果使用 200px 的值作为 width
长度,则 min-width
值为 100px 将没有必要,因为您已经为 width
指定了绝对值(即 200px)。使用 min-width
的最佳方法是将 width
值定义为百分比,并为 min-width
属性使用绝对值,否则使用百分比值用于 min-width
和 width
将不会产生预期结果。
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
24+ | 5.1+ | 18+ | 12.1+ | 8+ | 2.1+ | 3.2+ |
对于较旧的浏览器,是否有一些解决方法需要注意?
是否还有…?
卡尔,
在大多数用户使用现代浏览器的时代,我不再担心这个问题了。
我来自 IE 5 & 6 的时代,你必须确保你计划好这个,但现在已经不再需要了。
@Chris,令我惊讶的是你没有在这里将默认值设置为一个简单的参考。
设置 min-width css 的示例是什么?
非常感谢,我到处都找不到我的 min-width 无法正常工作的答案。这是因为我同时使用了 width 和 min-width 的百分比,但我找到了我的错误。谢谢 :)
嗨,
有没有办法将最小宽度设置为表格列或表格单元格?
请解释为什么使用 width: 100%; 以及 min-width 的绝对值?
min-width 属性不起作用。我已经尝试过所有方法,它就像一个没有意义的装饰元素。我甚至尝试过
display: inline-block
,但这没有效果。我开始怀疑我的 CSS API 是否被黑了。