我有以下问题:
我有包含其他元素的 div,我尝试使其宽度取决于内容。我还限制了这个 div 的最大宽度。我在 CSS 中使用了 min-width
和 max-width
,但似乎 min-width
不起作用。 div 的宽度始终是 max-width
值,无论内容是什么。
示例:
我希望白色 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;
}
(来源:wstaw.org)
最佳答案
默认情况下, block 级元素将展开以填充尽可能多的宽度。所以它的宽度基本上是“100%”(有点),你说的是最大 1000 像素,所以它扩展到最大 1000 像素。最小宽度仍在实现中(至少 500 像素)。尝试设置 display: inline-block
在元素上,看看是否对您有所帮助。这应该使它只扩展到它的内容,同时仍然注意最小和最大宽度。您可能需要添加断路器 <br />
之后使您的其余内容适应内联。
关于html - CSS 最小宽度属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8263543/