Question

目标：直接在下方显示一些带有成对逐字翻译的文字。文本必须包含在窗口中。必须在HTML5中工作。解决方案应如下所示：

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

这是我在这里的第一篇文章，但已经从stackoverflow中吸取了数周的智慧。多么棒的资源！期待一些聪明的回复。

其他信息：

我是通过使用内联表为非HTML5完成的，但是一旦完成   你输入一个HTML5标识“！DOCTYPE html”标签，它打破了   浏览器将表视为块级元素。

我的非HTML5解决方案：

<HTML>
<BODY>
<table border="1" style="display:inline"><tr><td>hello</td></tr><tr><td>bonjour</td></tr></table>
<table border="1" style="display:inline"><tr><td>folks</td></tr><tr><td>les gens</td></tr></table>
<table border="1" style="display:inline"><tr><td>thank you</td></tr><tr><td>je vous remercie</td></tr></table>
<table border="1" style="display:inline"><tr><td>for your</td></tr><tr><td>pour votre</td></tr></table>
<table border="1" style="display:inline"><tr><td>helping me</td></tr><tr><td>aide-moi</td></tr></table>
<table border="1" style="display:inline"><tr><td>solve</td></tr><tr><td>à résoudre</td></tr></table>
<table border="1" style="display:inline"><tr><td>this</td></tr><tr><td>ce</td></tr></table>
<table border="1" style="display:inline"><tr><td>intractable</td></tr><tr><td>problème</td></tr></table>
<table border="1" style="display:inline"><tr><td>problem</td></tr><tr><td>insoluble</td></tr></table>
<table border="1" style="display:inline"><tr><td>.</td></tr><tr><td>.</td></tr></table>
<table border="1" style="display:inline"><tr><td>hello</td></tr><tr><td>bonjour</td></tr></table>
<table border="1" style="display:inline"><tr><td>folks</td></tr><tr><td>les gens</td></tr></table>
<table border="1" style="display:inline"><tr><td>thank you</td></tr><tr><td>je vous remercie</td></tr></table>
<table border="1" style="display:inline"><tr><td>for your</td></tr><tr><td>pour votre</td></tr></table>
<table border="1" style="display:inline"><tr><td>helping me</td></tr><tr><td>aide-moi</td></tr></table>
<table border="1" style="display:inline"><tr><td>solve</td></tr><tr><td>à résoudre</td></tr></table>
<table border="1" style="display:inline"><tr><td>this</td></tr><tr><td>ce</td></tr></table>
<table border="1" style="display:inline"><tr><td>intractable</td></tr><tr><td>problème</td></tr></table>
<table border="1" style="display:inline"><tr><td>problem</td></tr><tr><td>insoluble</td></tr></table>
<table border="1" style="display:inline"><tr><td>.</td></tr><tr><td>.</td></tr></table>
</BODY>
</HTML>

Answer 1

您想要display: inline-table。

否则，display: table-row内有display: inline，浏览器会生成一个匿名display: table块来保存<tr>。

那就是说，你所拥有的东西看起来并不像表格数据结构。

我怀疑你用一张桌子会更好：

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

...虽然我没有测试过，所以我不能说什么是浏览器支持。

Answer 2

最常见的浏览器方式可能是删除style属性（无论如何都要使用它们 - 一次又一次地重复相同的设置）并使用以下样式表：

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

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

Answer 3

由于表格只是二维的，为什么不使用样式列表（LI）？

<ul><li>Item One</li><li>Item Two</li></ul>

然后更改列表的样式：

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

Answer 4

我认为这会对您有效，因为您显示了屏幕截图：http://jsfiddle.net/5Ak2g/

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

4 个答案: