CSSのmin-widthプロパティが機能しません

私は次の問題があります:
私は他の要素を含むdivを持っており、その幅をコンテンツに依存させようとしています。私はまた、このdivの最大幅を制限します。 CSSでは min-width max-width を使用していますが、 min-width は機能していないようです。 divの幅は、コンテンツの内容にかかわらず常に max-width の値です。

Example:

私は白いdiv(それはメインdiv、私が話していた)厳密にそれにあるフォームの周りに、左と右の空のスペースなしにしたいと思います。コンテンツが小さい場合でも、メインのdivは同じままであることを示すために、 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;
}

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

18

1 答え

By default, a block-level element will expand to fill as much width as possible. So it's 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 being achieved (it's at least 500px). Try setting display: inline-block on the element and see if that helps you out any. This should make it only expand as far as it's content while still paying attention to the minimum and maximum widths. You may have to add a breaker
after to make the rest of your content adapt to it being inline.

31
追加された
text-align:center は機能するはずです。 こちらをご覧ください
追加された 著者 animuson,
それは働いた、ありがとう!しかし、divは現在は中央に位置していません - 左に張り付いています。私はそれを <div style = "text-align:center"> <div> </div> </div>に入れて修正しようとしました。 (min-widthがまだ必要なので、 margin-left および margin-right:auto を持つ親divは機能しません。
追加された 著者 vizzdoom,