是否可以收縮包裝內容？

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

是否可以收縮包裝內容？

回答

相關問題