text-align不能按預期工作

我試圖在它們的容器的不同側上製作兩個元素。在我的實際代碼中，這兩個元素將位於div的相反兩側，但爲了舉例，可以說我希望它們位於瀏覽器窗口的兩側。text-align不能按預期工作

所以我做了一個簡單的：在

<html> 
<head> 
</head> 
<body> 
<table> 
<tr> 
<td style="width: 50%;text-align: left;"> 
This should go left 
</td> 
<td style="width: 50%;text-align: right;"> 
This should go right 
</td> 
</tr> 
</table> 
</body> 
</html>

例子：http://jsbin.com/ocete/

好吧，我不完全肯定如何與申報單，即使做到這一點非常好。同樣在右對齊的表格單元格中，我的實際代碼中會有兩個元素。一個是圖像，一個是文本。我希望它們位於包含它們的<td>的對面。

我該如何以我想要的方式來做到這一點？我沒有看到任何直接的方式。（請不要推薦固定定位）

來源

2009-12-10 Earlz

在桌子上設置border = 1會顯示給你。 ;-) – 2009-12-10 15:55:26

我已經解釋瞭如何在我的答案中右對齊單元格中的圖像和文本片段。看一看。 – 2009-12-10 15:56:07

要將<table>元素中，添加：

style="width: 100%"

一切都可以正常使用，你的表是不夠大，看看它。

來源

2009-12-10 15:48:45 jvenema

是的。我覺得很愚蠢。大聲笑 – Earlz 2009-12-10 15:53:28

+1，確實如此。將邊界設置爲開啓將使OP立即知道發生了什麼。 – 2009-12-10 15:54:48

也設置'table-layout：fixed'來告訴瀏覽器你真正的意思，這樣它就不會「幫助」改變你的單元格寬度。（這也渲染得更快。） – bobince 2009-12-10 15:58:44

您沒有爲表格指定寬度，所以它只有它需要的寬度，因此您看不到文字對齊有任何區別。

試試這個

和再看一看。

來源

2009-12-10 15:49:06 nickf

gah，我不夠快。 – Agos 2009-12-10 15:51:02

任何使用表格進行佈局的理由？改爲使用兩個div s，將它們的寬度分別設置爲50％，然後將第二個div浮動到右側。

來源

2009-12-10 15:50:43

向該表中添加第三個單元格。很微不足道的權利？浮動div並非如此微不足道。 – Earlz 2009-12-10 15:52:56

@earlz：好，取決於。 HTML代碼是微不足道的。 CSS代碼只是*稍微*更復雜 - 只需爲'div'添加適當的邊距即可。真正的問題出現在你想讓所有'div'的高度相同時，無論它們的內容高度如何 - 但（純CSS）解決方案也是如此。 – 2009-12-10 20:23:18

寬度添加到您的表..

編輯：tooo慢

來源

2009-12-10 15:50:52

如果你正在尋找的一側上，你可以用一個表的獨立文本兩邊放像側以下內容：

<table style="width: 100%"> 
<tr> 
<td style="text-alight: left;"> 
text 
</td> 
<td style="text-align: right;"> 
    <table style="width: 100%"> 
    <tr> 
     <td style="text-align: left;">image</td> 
     <td style="text-align: right;">text</td> 
    </tr> 
    </table> 
</td> 
</tr> 
</table>

這應該讓你像

----------------------------- 
|text |image | text| 
-----------------------------

來源

2009-12-10 15:51:49

你總是要用桌子嗎？如果是這樣，上述答案將起作用。但是，如果您在容器div中使用兩個div，則需要分別將內部div分別左移和右移，然後清除容器div中的浮動。

來源

2009-12-10 15:52:33 ryanulit

text-align不能按預期工作

回答

相關問題