html - 添加 float : left breaks list

Question

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

我想我可以在表格和图像中使用 float: left 使它们显示在同一行中，但这不起作用。难道不能在 li 中使用 float: left 吗？否则我该如何实现？

Answer 1

我会使用 inline-table，它在 CSS2.1 中得到了很好的支持:

table {
    display: inline-table;
}

我在以下位置构建了一个演示:http://jsfiddle.net/audetwebdesign/cYDUC/

您需要注意 ul 和 li 元素周围的填充和边距，并隐藏左侧的元素符号(除非您想要显示它)。

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