是否可以收缩包装内容？

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

来源

2012-07-12 David Jones

-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; 
    }

来源

2012-07-12 07:06:26 Fredy

谢谢弗雷迪。唯一的问题是我想我的宽度和高度是相同的。有没有办法做到这一点？ – 2012-07-12 07:22:15

@danielfaraday：你必须使用jQuery/motools这样的javascript，因为css还没有能够“收缩”。你打算做一个流体网？ – Fredy 2012-07-12 07:35:45

-1

使用white-space:nowrap;

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

DEMO

来源

2012-07-12 06:37:24

是否有可能拆封包裹* *内容是什么？ – 2012-07-12 06:39:34

这两个答案到目前为止只是删除包装。我仍然希望我的元素包裹，但我也想消除任何多余的空白。那有意义吗？ – 2012-07-12 06:46:25

是否可以收缩包装内容？

回答

相关问题