td元素内的组内容

Question

让我说我有这样的事情：

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

如何判断span内的每个td占据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>
...

但那不起作用

谢谢

Answer 1

它们各自占据父元素宽度的50％，问题是也占据该空间一部分的元素之间的换行符。 50％+空格+ 50％等于更多而不是100％。

删除换行符，或使用float: left（或right）。

使用float: left：JS Fiddle demo。

没有新行：JS Fiddle demo。