CSS min-width 属性不起作用
我有以下问题：
我有包含其他元素的 div，我尝试使其宽度依赖于内容。我还限制了这个 div 的最大宽度。我在 CSS 中使用 min-width 和 max-width，但似乎 min-width 不起作用。无论内容是什么，div 的宽度始终是 max-width 值。
示例：
我希望白色 div（即我所说的主 div）严格围绕其中的表单，左侧和右侧没有空格。我给出了表单样式 max-width:500px 来表明即使内容很小，主 div 也保持不变。
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}
（来源：wstaw.org）
I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.
Example:
I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;
box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}
(source: wstaw.org)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
默认情况下，块级元素将扩展以填充尽可能多的宽度。所以它的宽度基本上是“100%”（有点），你说的最大宽度是 1000px，所以它会扩展到最大 1000px。最小宽度仍在实现中（至少 500 像素）。尝试在元素上设置
display: inline-block，看看是否对您有帮助。这应该使它只扩展到其内容，同时仍然注意最小和最大宽度。您可能需要在后面添加一个分隔符
By default, a block-level element will expand to fill as much width as possible. So its width is basically "100%" (sort of) and you're saying a maximum of 1000px, so it's expanding to the maximum of 1000px. The minimum width is still being achieved (it's at least 500px). Try setting
display: inline-blockon the element and see if that helps you out any. This should make it only expand as far as its content while still paying attention to the minimum and maximum widths. You may have to add a breaker<br />after to make the rest of your content adapts to it being inline.