html - 是否可以收缩包装的内容？

Question

如果您使用 <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;
}

Answer 1

试试这个 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;
    }