当前位置：首页 → 问答吧 → 文字左右对齐的问题

文字左右对齐的问题

时间：2011-12-07

来源：互联网

1. 价格：aaaaaa
商品数量：aaaaa

2. 价格：aaaaa
商品数量：aaaaa

价格：aaaaaa
商品数量：aaaaaa

请问如果要让1的价格左右对齐显示效果如果2所示样式要怎么写

作者: kuqijiedao 发布时间: 2011-12-07

加全角空格
HTML code


<style>
strong{width:100px;text-align:justify;text-justify:distribute-all-lines;}
</style>
<p><strong>价　　格：</strong>aaaaaa</p>
<p><strong>商品数量：</strong>aaaaaa</p>

作者: hookee 发布时间: 2011-12-07

CSS code


strong { width:100px; display:inline-block; text-align:right;}

你可以试试这个效果

同样，用一楼的中间加中文空格也行，不过上面的不通用，如果第一行的文字有3个，空格就没办法加了。

作者: yusongkun 发布时间: 2011-12-07

引用 1 楼 hookee 的回复:
加全角空格

HTML code

<style>
strong{width:100px;text-align:justify;text-justify:distribute-all-lines;}
</style>
价　　格：aaaaaa
商品数量：aaaaaa

网上查的很多说用这个但试了没有效果
价格：aaaaaa
商品数量：aaaaaa

要让价格自动左右对齐商品数量

作者: kuqijiedao 发布时间: 2011-12-07

引用 2 楼 yusongkun 的回复:
CSS code

strong { width:100px; display:inline-block; text-align:right;}

你可以试试这个效果

同样，用一楼的中间加中文空格也行，不过上面的不通用，如果第一行的文字有3个，空格就没办法加了。

这个变成右对齐

是想知道在不手动加空格符的情况下怎么让他左右对齐？

作者: kuqijiedao 发布时间: 2011-12-07

css本身不支持这个功能。

作者: yusongkun 发布时间: 2011-12-07

用英文就有效果了,中文就加全角空格

作者: hookee 发布时间: 2011-12-07

全角空格可以对齐啊

作者: qq307023807 发布时间: 2011-12-07

引用 6 楼 hookee 的回复:
用英文就有效果了,中文就加全角空格

英文我试了也没效果好

strong{width:100px;text-align:justify;text-justify:distribute-all-lines;}

这个到底要怎么样有效果？

作者: kuqijiedao 发布时间: 2011-12-07