html - 在 td 元素内分组内容

假设我有这样的东西:

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

我如何告诉我的 td 中的每个 span 占据我的 td 宽度的 50% 并且居中对齐文本我的跨度？我还希望文本在我的 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>
...

但这并没有奏效

谢谢

最佳答案

它们各占父元素宽度的 50%，问题是元素之间的换行符也占用了该空间的一部分。 50% + 一个空格 + 50% 等于大于 100%。

删除换行符，或使用float: left(或right)。

float: left: JS Fiddle demo .

没有新行:JS Fiddle demo .

关于html - 在 td 元素内分组内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17455402/