CSS最小宽度属性不起作用 [英] CSS min-width property is not functioning

问题描述

我有以下问题:
我的div包含其他元素，我尝试使其宽度取决于内容.我也限制了这个div的最大宽度.我在CSS中使用了min-width和max-width，但是似乎min-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.

示例:

我希望白色div(我正在谈论的主要div)严格围绕其中的形式，左右两侧不留空格.我给出了表单样式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

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

_{(来源: wstaw.org )}

_{(source: wstaw.org)}

推荐答案

默认情况下，块级元素将扩展以填充尽可能多的宽度.因此，它的宽度基本上是"100％"(大约)，您说的是最大1000像素，因此它正在扩展到最大1000像素.最小宽度仍在实现(至少500像素).尝试在元素上设置display: inline-block，看看是否有帮助.这应该使它仅扩展到其内容，同时仍要注意最小和最大宽度.您可能必须在之后添加一个断路器<br />，以使其余内容适应于内联.

By default, a block-level element will expand to fill as much width as possible. So its 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 still 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 its 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 adapts to it being inline.

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