CSS min-width属性不起作用

Question

我有以下问题:
我有div包含其他元素,我尝试使其宽度取决于内容.我也限制了这个div的最大宽度.我用min-width与max-width在CSS,但似乎min-width不工作.max-width无论内容是什么,div的宽度始终是值.

例:

我想把白色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;
}

示例http://wstaw.org/m/2011/11/25/ttt.png

Answer 1

默认情况下,块级元素将展开以填充尽可能宽的宽度.所以它的宽度基本上是"100%"(有点),你说的最大值是1000px,因此,它正在扩展到最大1000px.达到最小宽度(至少500px).尝试设置display: inline-block元素,看看是否可以帮助你.这应该使它只扩展到它的内容,同时仍然注意最小和最大宽度.您可能必须在添加断路器<br />之后使其余内容适应内联.