0

目标：直接在下方显示一些带有成对逐字翻译的文本。文本必须在窗口中换行。必须在 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>
4

4 回答 4

1

你想要display: inline-table。

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

也就是说，您所拥有的实际上并不像表格数据结构。

我怀疑你最好用一张桌子：

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

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

于 2012-05-11T13:33:53.733 回答
1

最跨浏览器的方法可能是删除style属性（无论如何使用它们是不切实际的——一次又一次地重复相同的设置）并使用以下样式表：

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

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

于 2012-05-11T13:43:37.350 回答
0

由于表格只是二维的，为什么不直接使用样式列表 ( 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}
于 2012-05-11T13:31:56.623 回答
-1

我认为这对您有用，如您显示的屏幕截图：http: //jsfiddle.net/5Ak2g/

于 2012-05-11T13:40:57.817 回答