CSS表格显示模式布局

Question

  

View JSFiddle >

我有一个使用jQuery制作的布局（see here），我觉得很多代码都可以替换为display: table，display: table-cell和{{1} }。但是我从来没有弄明白。

display: table-row

HTML

您可以看到它在jQuery here中运行，或者没有here。

  

提前感谢您提供任何帮助。

PS：我不想因为自己的原因更改元素类型，因此请保留<menu> <command class="less" /> <command class="more" /> <div></div> <command class="save" /> <command class="vote" /> <div></div> <command class="send" /> <command class="exit" /> </menu> 和<menu>元素。我只需要CSS的帮助

Answer 1

我添加了一些HTML元素来使这个功能只使用CSS，而不是JavaScript。

此外，我通过使用 X 在属性前面删除了一些现有的CSS属性。例如：

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

链接到jsfiddle example。