CSS min-width 属性不起作用

Question

我有以下问题：
我有 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）}

Answer 1

默认情况下，块级元素会扩展以填充尽可能多的宽度。所以它的宽度基本上是“100%”（有点），你说的是最大 1000px，所以它扩展到最大 1000px。仍在达到最小宽度（至少为 500 像素）。尝试在元素上设置display: inline-block，看看这是否对您有帮助。这应该使其仅扩展至其内容，同时仍注意最小和最大宽度。您可能必须在之后添加一个断路器 <br /> 以使您的其余内容适应它被内联。