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不能按预期工作

回答

相关问题