CSS min-width属性不起作用

Question

我有以下问题：
我有div包含其他元素，我尝试使其宽度依赖于内容。我也限制这个div的最大宽度。我在CSS中使用min-width和max-width，但似乎min-width不起作用。无论内容是什么，div的宽度始终为max-width值。

例子：

我想有白格（即主格，我是在谈论）严格围绕在它的形式，而不会在左侧和右侧空的空间。我给了表格样式max-width:500px来表明，即使内容很小，主格保持不变。

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; 
} 

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

Answer 1

缺省情况下，块级元素将扩展以填充尽可能多的宽度成为可能。所以它的宽度基本上是“100％”（有点），而你最多说的是1000px，所以它扩展到最大1000px。最小宽度正在达到（至少500px）。尝试在元素上设置display: inline-block，看看是否可以帮助你解决任何问题。这应该使它只在内容扩展的同时仍然注意最小和最大宽度。之后您可能需要添加一个破解者<br />，以使其他内容适应内联。