如何使用CSS對齊三個跨度（無表）

我在某些代碼中使用此表;如何使用CSS對齊三個跨度（無表）

<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"。

來源

2010-08-16 CmdrTallen

http://stackoverflow.com/questions/591539/can-form-styling-be-done-without-tables – 2016-05-31 09:00:23

首先，讓你的HTML正確：使用正確的標籤來包含你的數據。您提供的信息不足以讓我們確定您要格式化的信息類型。 如果是它是表格數據，那麼使用表格就不會感到羞恥 - 它意味着什麼。

現在，使用CSS的正確方式是而不是可以將所有樣式內嵌到您喜歡的內容中。請將它們保存在單獨的CSS文件中，並使用選擇器以避免重複多次。

這裏的解決方案：http://www.jsfiddle.net/2TDXc/

哦，請不要聽那個「只使用表」 bullcrap。真的，從長遠來看，它對每個人都有好處。

來源

2010-08-16 06:17:45

附加的鏈接代碼正是我一直在尋找的。謝謝！ – CmdrTallen 2010-08-16 15:07:26

你是什麼意思鋸齒狀？你的意思是你想要text-align:justify？或者你的意思是你遇到與高度不同的列有問題？如果後者，包含div可能會有所幫助。對於這個問題，嘗試使用div而不是跨度或設置display:block

無論如何，看看Matthew James Taylor提供的CSS模板可能會有所幫助，如果你的意思是後者的問題。

來源

2010-08-16 05:32:38 maco

增加了一些示例表格佈局，鋸齒文本意思不一樣長度，但我需要它們對齊。謝謝！ – CmdrTallen 2010-08-16 05:53:02

您需要使用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>

對於鋸齒狀的煩躁，你必須明白，你的列不繼承或者就像他們在一個表中彼此分享任何東西，所以你最終將不得不硬編碼的寬度。它看起來像一張桌子可能是你需要的東西。

來源

2010-08-16 06:24:25 stupidkid

如何使用CSS對齊三個跨度（無表）

回答

相關問題