0

目標:直下に対になった単語ごとの翻訳を含むテキストを表示します。テキストはウィンドウ内で折り返す必要があります。HTML5 で動作する必要があります。ソリューションは次のようになります。

スクリーンショット

HTML5 の理由は、ページを jQuery と jQuery Mobile でサポートしたいからです。ソリューションでテーブルを使用する必要はありません。これらの単語のペアを上下に表示したいだけです。

これは私の最初の投稿ですが、すでに何週間もの間、stackoverflow からの知恵を吸収してきました。なんて素晴らしいリソースでしょう！スマートな回答をお待ちしております。

追加情報：

インライン テーブルを使用して非 HTML5 に対して実行しましたが、「!DOCTYPE html」タグを識別する HTML5 を挿入するとすぐに、それが壊れ、ブラウザーはテーブルをブロック レベル要素として扱います。

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

これを行うための最もクロスブラウザな方法は、おそらく属性を削除しstyle(属性を使用するのは実際的ではありません。同じ設定を何度も繰り返します)、次のスタイル シートを使用することです。

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

これは、古いバージョンの IE を含め、すべての CSS 対応ブラウザーで機能します。マージン値を必要に応じて調整します。

于 2012-05-11T13:43:37.350 に答える
0

テーブルは 2 次元だけなので、スタイル付きリスト ( 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 に答える