Jquery 如何在HTML5中创建内联表元素？

目标：显示一些文本，并在其正下方显示成对的逐字翻译。文本必须在窗口中换行。必须在HTML5中工作。解决方案应如下所示：

HTML5的原因是我希望页面在jQuery和jQuery Mobile中得到支持。解决方案不必使用表格，我只想将这些单词对显示在彼此的上方/下方

这是我在这里的第一篇文章，但已经从stackoverflow汲取了数周的智慧。多好的资源啊！期待一些明智的答复

其他信息：

我已经通过使用内联表为非HTML5实现了这一点，但只要 你放入一个HTML5标识“！DOCTYPE html”标记，它会断开并 浏览器将表格视为块级图元

我的非HTML5解决方案：

hellobonjour
民间氏族
谢谢你的提醒
为了你的酒
帮助我
解决问题
蒂斯
难治性问题
问题无法解决
..
hellobonjour
民间氏族
谢谢你的提醒
为了你的酒
帮助我
解决问题
蒂斯
难治性问题
问题无法解决
..

既然表格只是二维的，为什么不使用样式化列表（

LI

）

---

您需要

显示：内联表

否则，在

display:inline

中会有一个

display:table行

，浏览器会生成一个匿名

display:table

块来保存

---

也就是说，您所拥有的并不像是一个表格数据结构

我想你最好坐一张桌子：

table { display: inline; }
tr { display: inline-table; }

---

…虽然我还没有测试过，所以我不能说浏览器支持会是什么样子。

我认为这对您来说是可行的，正如您显示的屏幕截图所示：

最跨浏览器的方法可能是删除

样式

属性（无论如何，使用它们反复重复相同的设置是不实际的）并使用以下样式表：

 table { float: left; margin-right: 0.25em;  margin-bottom: 0.25em; }

---

这适用于所有支持CSS的浏览器，甚至旧版本的IE。根据需要调整边距值。

指向屏幕截图的链接不起作用。听起来很有趣，我该如何使用LI？你能举个例子吗？试过了但没用。第二项在第一项的右边，而不是下面。将使用其他解决方案，但感谢您的帮助。这就是问题所在-谢谢！太快了。下面的内容：

表{display:inline table；}

folksles gens

folksles gens

顺便说一句，它在IE7中不起作用，但我喜欢这个解决方案的优雅：）谢谢你的回答-效果很好，我还测试了它与旧版本IE的兼容性。Equal top解决方案

ul, li {list-style:none;padding:0;margin:0;display:inline;margin-right:10px;}
li {border:1px solid #000000}

table { display: inline; }
tr { display: inline-table; }

 table { float: left; margin-right: 0.25em;  margin-bottom: 0.25em; }