添加浮點數：左中斷列表

Question

我有一個名爲「計劃」的視覺元素，它在html頁面中列出。每個「計劃」都有一張小桌子和一張圖片，我想並排顯示。沒有任何造型它看起來像這樣：http://jsfiddle.net/DCTwd/1/

我以爲我可以在表和圖像中使用float: left使它們顯示在同一行中，但這是行不通的。 li內部不可以使用float: left嗎？否則我怎麼能做到這一點？

Answer 1

不需要古代float:left;，當display:inline-block;是你最好的朋友！

your updated jsFiddle。這是一個非常簡單的例子，所以你的實際CSS應該涉及基於類的而不是基於元素的CSS，但它可以得到滿足。

請注意zoom:1; *display:inline;對於美學的IE7-和vertical-align:middle;的回退。你也可以使用top或bottom，無論你爲什麼工作。

Answer 2

我會用一個inline-table這是很好的支持爲CSS2.1的：

table { 
    display: inline-table; 
} 

我在建立一個演示：http://jsfiddle.net/audetwebdesign/cYDUC/

你需要注意的填充和利潤率在你的ul和li元素並隱藏左邊的子彈（除非要顯示它）。

如果您需要支持IE7，則可以使用display: inline並相應地調整元素周圍的填充和邊距。