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

使用white-space:nowrap;

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

<强> DEMO

Answer 2

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

是否可以收缩包装内容？

2 个答案: