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 />，以使其他內容適應內聯。