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

Question

如果您为容器使用<span>标签并将其设置为display: inline-block，则容器将收缩包装内容，除非内容包装成多行，在这种情况下，容器的宽度默认为 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;
    } 

Answer 2

利用white-space:nowrap;

.wrapper {
    display: inline-block;
    border: solid 1px black;
    white-space:nowrap;
}

演示