Html CSS min-width 属性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8263543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS min-width property is not functioning
提问by vizzdoom
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-widthand max-widthin CSS, but it seems that min-widthis not working. The width of div is always the max-widthvalue, no matter what the content is.
我有以下问题：
我有包含其他元素的 div，我尝试使其宽度取决于内容。我还限制了这个 div 的最大宽度。我在 CSS 中使用min-width和max-width，但似乎min-width不起作用。div 的宽度始终是max-width值，无论内容是什么。
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:500pxto show that even if content is small, the main div stays the same.
我想让白色 div（我正在谈论的主 div）严格围绕其中的表单，左右两侧没有空格。我给了表单样式max-width:500px来表明即使内容很小，主div也保持不变。
HTML
HTML
<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id='content'>
<!-- CONTENT -->
</div>
</form>
</div>
CSS
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)
（来源：wstaw.org）
回答by animuson
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.
默认情况下，块级元素将扩展以填充尽可能多的宽度。所以它的宽度基本上是“100%”（有点），你说最大是 1000px，所以它扩展到最大 1000px。仍在实现最小宽度（至少 500 像素）。尝试display: inline-block在元素上设置，看看是否对您有帮助。这应该使它只扩展到它的内容，同时仍然注意最小和最大宽度。您可能需要在之后添加一个断路器<br />，以使您的其余内容适应内联。
