html - 添加浮动：左中断列表

Question

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

我以为我可以float: left在表格和图像中使用以使它们显示在同一行中，但这不起作用。不能float: left在 a 内使用li吗？否则我怎么能做到这一点？

score 2 · Accepted Answer

我会使用inline-table从 CSS2.1 开始得到很好支持的一个：

table {
    display: inline-table;
}

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

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

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

score 1 · Accepted Answer

不需要古人float:left;，什么时候display:inline-block;才是你最好的朋友！

您更新的 jsFiddle。这是一个过于简单的示例，因此您的实际 CSS 应该涉及基于类而不是基于元素的 CSS，但它明白了这一点。

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

2 回答 2