CSS min-width属性不工作 [英] CSS min-width property is not working

问题描述

我有以下问题：

我有div包含其他元素，我尝试使其宽度取决于内容。我也限制这个div的最大宽度。我在CSS中使用 min-width 和 max-width ，但似乎 width 无法正常工作。 div的宽度总是 max-width 值，无论内容是什么。

I have following problem:
I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is.

示例：

是主要的，我在说的）严格地围绕着它的形式，在左边和右边没有空的空间。我给出了格式样式 max-width：500px ，表明即使内容很小，主div也保持不变。

I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.

HTML

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

推荐答案

默认情况下，以填充尽可能宽的宽度。所以它的宽度基本上是100％（类），你说的最大1000px，所以，它的最大扩展到1000px。正在实现最小宽度（至少为500像素）。尝试在元素上设置 display：inline-block ，看看是否可以帮助你。这应该使它只扩展到它的内容，同时仍然注意最小和最大宽度。您可能需要添加一个断路器< br /> 才能使其余内容适应内联。

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 <br /> after to make the rest of your content adapt to it being inline.

这篇关于CSS min-width属性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！