是否可以收缩包装内容?
问题描述:
如果使用<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;
}
答
试试这个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;
}
答
使用white-space:nowrap;
.wrapper {
display: inline-block;
border: solid 1px black;
white-space:nowrap;
}
+0
是否有可能拆封包裹* *内容是什么? – 2012-07-12 06:39:34
+0
这两个答案到目前为止只是删除包装。我仍然希望我的元素包裹,但我也想消除任何多余的空白。那有意义吗? – 2012-07-12 06:46:25
谢谢弗雷迪。唯一的问题是我想我的宽度和高度是相同的。有没有办法做到这一点? – 2012-07-12 07:22:15
@danielfaraday:你必须使用jQuery/motools这样的javascript,因为css还没有能够“收缩”。你打算做一个流体网? – Fredy 2012-07-12 07:35:45