液體形式的佈局，顯示：內聯塊

我有與標籤容器和值容器中的形式爲一列，我已經作出了小提琴來說明： http://jsfiddle.net/eEvEN/3/液體形式的佈局，顯示：內聯塊

佈局是固定的，我從不想要的值容器包裝在標籤容器下。由於這兩個容器都設置爲inline-block，我可以對列表行執行white-space:nowrap（參見小提琴），並部分實現了目標。部分原因是因爲在值容器中，如果瀏覽器的寬度不足以將文本保存在一行中，我確實希望文本可以包裝。所以我認爲我可以做white-space:normal的價值容器，但它沒有工作......它重塑在nowrap時尚。

我該怎麼做才能使這項工作正常？

來源

2013-05-02 Yog

你嘗試過使用重要的白色空間工作

！解決方法：正常嗎？ – DiederikEEn 2013-05-02 12:51:37

thx，但嘗試一下，它不起作用。 – Yog 2013-05-02 13:06:18

也，我犯了一個錯字。我打算寫這個佈局是流暢的，而不是固定的！抱歉。 – Yog 2013-05-02 13:13:23

我已經使用CSS表格顯示（即錶行和表格單元）解決了這個問題。但是這個解決方案將會是misbehave in older IE versions。

li { 
    display: table-row; 
} 
.field_label { 
    display: table-cell; 
    min-width: 140px; 
    background: yellow; 
} 
.field_widget { 
    display: table-cell; 
    background: cyan; 
}

使用解決方案CSS表http://jsfiddle.net/ECssv/使用HTML表格http://jsfiddle.net/VrHMm/應在老年人的IE

來源

2013-05-02 15:02:25 vlgalik

是的，也試過了，它不能只在IE7下工作。這是一個很好的解決方案，雖然我一直在尋找一個IE7以防萬一。這可能是我會用的一個。 – Yog 2013-05-02 21:29:20

您可以更改HTML並將表（TR LI）替換爲列表（UL LI）。然後你會得到IE7的支持;） – vlgalik 2013-05-03 07:40:25

表是用於定製的皮塔，當你永遠不知道某些行將不會有比平常更多或更少的單元格。有很多其他的利弊，可以寫一篇關於它的文章;] – Yog 2013-05-03 14:35:43

液體形式的佈局，顯示：內聯塊

回答

相關問題