如果您使用 <span>
标记您的容器并将其设置为 display: inline-block
,则容器将shrinkwrap内容,除非内容换行到多行,在这种情况下,容器的宽度默认为 100%。有什么方法可以收缩包裹的内容吗?这是我的代码(http://jsfiddle.net/T8uGm/):
HTML
<span class="wrapper">
<a href="#" class="block"></a>
<a href="#" class="block"></a>
<a href="#" class="block"></a>
<a href="#" class="block"></a>
<a href="#" class="block"></a>
<a href="#" class="block"></a>
<a href="#" class="block"></a>
</span>
CSS
.block {
display: inline-block;
width: 100px;
height: 100px;
background: blue;
}
.wrapper {
display: inline-block;
border: solid 1px black;
}
最佳答案
试试这个 CSS:
.block {
display: inline-block;
min-width: 100px; /* The fix minimum width of span/div */
width: 19.5%; /* Depending how much box in 1 row. Exm: 5 block = 20% (19.5% to give space) */
height: 100px;
background: blue;
}
关于html - 是否可以收缩包装的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11446169/