讓不同類中不同的div在同一行

我有這樣的事情：讓不同類中不同的div在同一行

<div class="wrapper" style="display:block;"> 
    <div class="field1"> 
    <div class="label">Label1</div> 
    <div class="item">Item 1</div> 
    </div> 

    <div class="field2"> 
    <div class="label">Label2</div> 
    <div class="item">Item2</div> 
    </div> 

    <div class="field3"> 
    <div class="label">Label3</div> 
    <div class="item">Item3</div> 
    </div> 

    ... more fields ... 
</div>

我怎樣才能在通過CSS的同一行顯示爲「項目1項目2項目3」我的顯示器？我可以通過「display：none;」隱藏標籤。我使用Drupal 7和CCK字段，所以我認爲結構是有點固定的。謝謝。

來源

2013-01-16 kietnguyen

如果我正確理解你，你有一個包裝，必須設置爲顯示：塊，但在裏面你想每個div在同一行。

在這種情況下，這應該CSS爲你做到這一點：

.field1, .field2, .field3 { 
    display: inline-block; 
}

這是JS Fiddle

來源

2013-01-16 01:21:21

非常感謝。我還發現我的新手錯誤，我有其他的CSS代碼位置：絕對;使其無法工作。 – kietnguyen

如果你想在同一行的一切，你應該使用span秒。

特別是，如果你想

項目1項目2項目3

然後用

<span class="field1"> 
    <span class="label">Label1</span> 
    <span class="item">Item 1</span> 
</span> 
<!-- ... -->

而且，你不需要語錄：<span class=field1></span>是罰款。

希望這會有所幫助！

來源

2013-01-16 02:16:41 MathSquared

知道這是舊的，但沒有理由你不應該使用引號 – Assimilater

讓不同類中不同的div在同一行

回答

相關問題