html – CSS min-width属性不工作

发布时间：2020-12-14 21:36:56 所属栏目：资源来源：网络整理

导读：我有以下问题：我的div包含其他元素，我尝试使其宽度取决于内容。我也限制这个div的最大宽度。我在CSS中使用最小宽度和最大宽度，但似乎最小宽度不起作用。 div的宽度始终为最大宽度值，无论内容如何。例：我想拥有白色的div(这是主要的div，我正在谈论)

我有以下问题：
我的div包含其他元素，我尝试使其宽度取决于内容。我也限制这个div的最大宽度。我在CSS中使用最小宽度和最大宽度，但似乎最小宽度不起作用。 div的宽度始终为最大宽度值，无论内容如何。

例：

我想拥有白色的div(这是主要的div，我正在谈论)严格地围绕它的形式，左侧和右侧没有空格。我给了表单样式max-width：500px来显示，即使内容很小，主div保持不变。

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!