html - 对 td 元素内的内容进行分组

Question

假设我有这样的事情：

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

我怎样才能告诉我span里面的每个td人占据我的宽度的 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）。

附float: left：JS Fiddle 演示。

没有换行符：JS Fiddle demo。