CSS 表格显示模式布局答案

【问题标题】：CSS table display modes layoutCSS 表格显示模式布局
【发布时间】：2012-01-13 21:31:19
【问题描述】：

View JSFiddle >

我有一个使用 jQuery 制作的布局 (see here)，我感觉很多代码可以替换为 display: table、display: table-cell 和 display: table-row。但是一直没弄明白。

HTML

<menu>
    <command class="less" />
    <command class="more" />
    <div></div>
    <command class="save" />
    <command class="vote" />
    <div></div>
    <command class="send" />
    <command class="exit" />
</menu>

您可以看到它与 jQuery here 一起运行，或者没有它 here。

提前感谢您的帮助。

PS：我不想因为自己的原因改变元素类型，所以请留下<menu>和<command>元素。我只需要 CSS 方面的帮助

【问题讨论】：

“jsfiddle.net/kkBRE/31”是否代表正确的视觉输出？如果是这样，您是否只是在寻找更改 jQuery 和 CSS 以使用 display:table 值的方法？

标签： jquery css-tables

【解决方案1】：

我添加了一些 HTML 元素以仅使用 CSS 而非 JavaScript 来实现此功能。

另外，我通过在属性前加上 X 删除了几个现有的 CSS 属性。示例：

menu > div {
    Xheight: 40px;
    Xfloat: left;
}

链接到jsfiddle example。

【讨论】：