html - td 要素内のグループ コンテンツ

Question

私はこのようなものを持っているとしましょう:

<table>
    <tr>
        <td>
           <span class="text_1">Text 1</span>
           <span class="text_2">Text 2</span>
        </td>
    </tr>
</table>

spanmy 内のそれぞれに、mytdの幅の 50% を使用しtd、スパンのテキストを中央揃えにするように指示するにはどうすればよいですか? また、テキストを td 内の同じ行に並べて表示したいと考えています。スパンで次のようなことを試しました：

...
<span class="text_1" style="display:inline-block;width:50%;">Text 1</span>
<span class="text_2" style="display:inline-block;width:50%;">Text 2</span>
...

しかし、それはうまくいきませんでした

ありがとうございました

Answer 1

それらはそれぞれ、親要素の幅の 50% を占めます。問題は、そのスペースの一部を占める要素間の改行です。50% + スペース + 50% は100%以上です。

改行を削除するか、float: left(またはright) を使用します。

With float: left: JS Fiddle デモ。

改行なし: JS Fiddle demo。