Question

我在一些代码中有这个表;

<table>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>

我想不使用表格并在CSS中进行对齐等操作。我试过了;

<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>

示例将尝试将此数据转换为CSS以与表格对齐;

<table>    
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>

但是中间的文字没有正确对齐，因为它的锯齿状（不同长度），左右值也是如此。似乎这很疯狂，我倾向于"Just Use Tables"。

Answer 1

首先，确保您的HTML正确：使用正确的标记来包含您的数据。您提供的信息不足以让我们确定您要格式化的信息类型。如果是表格数据，那么使用表格并不羞耻 - 它的含义是什么。

现在使用CSS的正确方式是而不是将所有样式内联，就像你正在做的那样。将它们保存在单独的CSS文件中，并使用选择器以避免重复自己这么多次。

以下是解决方案：http://www.jsfiddle.net/2TDXc/

哦，请不要听那个'Just Use Table'bullcrap。真的，从长远来看，它对每个人都有好处。

Answer 2

你的意思是锯齿状的？你的意思是你想要text-align:justify？或者你的意思是你在列不同高度时遇到麻烦？如果后者，包含div可能会有所帮助。就此而言，尝试使用div而不是跨度或设置display:block

无论如何，如果你的意思是后一个问题，查看Matthew James Taylor提供的CSS模板可能有所帮助。

Answer 3

您需要使用display:inline和display:inline-table css属性。它们非常适合强制任何元素在同一条线上彼此相邻。

<div>
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>

至于锯齿状，您必须意识到您的列不会像在表中那样继承或共享任何内容，因此您最终必须对宽度进行硬编码。看起来桌子可能就是你所需要的。

如何使用CSS对齐三个跨距（无表格）

3 个答案: