添加浮点数：左突破列表

Question

我有一个名为“计划”的视觉元素，它在html页面中列出。每个“计划”都有一个小桌子和一个图像，我想并排显示。没有任何样式，它看起来像这样：http://jsfiddle.net/DCTwd/1/

我以为我可以在表和图像中使用float: left使它们显示在同一行中，但这不起作用。是不是可以在float: left内使用li？否则我怎么能实现这个目标呢？

Answer 1

我会使用从{CSS2.1：

开始受到良好支持的inline-table

table {
    display: inline-table;
}

我在：http://jsfiddle.net/audetwebdesign/cYDUC/

制作了一个演示版

您需要注意ul和li元素周围的填充和边距，并隐藏左侧的子弹（除非您想要显示它）。

如果您需要支持IE7，可以使用display: inline并相应地调整元素周围的填充和边距。

Answer 2

当float:left;是你最好的朋友时，

不需要古老的display:inline-block;！

your updated jsFiddle。这是一个非常简单的例子，所以你的实际CSS应该涉及基于类而不是基于元素的CSS，但它可以解决这个问题。

请注意IE7的zoom:1; *display:inline;和美学的vertical-align:middle;的后备。您也可以使用top或bottom，无论对您有用。