浏览器中上面三个字,下面两个字 两端对齐(转)

HTML + CSS短标题(二,三,四文字长度)两端对齐的方式

这篇文章的讲的主要是关于一行横向排列内容,而又包含前面标题并且要求它的文字两端对齐的一种方法。如下图,网上有很多方法,但是经过我测试,基本 没有一种方法能通过所有浏览器测试。而以下这种方法则兼容了大多数主流浏览器(ie6、7、8、9,ff,chrome,safari)。

浏览器中上面三个字,下面两个字  两端对齐(转) 

重点:必须定义标题的字体,这里我们设置字体为simsun;。在三个字的标题,这里使用两个  当作一个汉字的宽度。而对于两 个字的标题,我们利用把输入法切换到全角的情况下,输入空格,这里的一个空格代表一个汉字的宽度。于是最后达到文字两端对齐的方式。

css部分:
.t_w{font-family:simsun;font-size:12px;}

.t_w dl{clear:both;height:30px;border-bottom:1px dashed #333;line-height:30px;}

.t_w dl dt,.t_w dl dd{float:left;}

.t_w dl dt{75px;}

.t_w dl dd{300px;}

html代码:
<div class=”t_w”>

    <dl><dt>你好你好:</dt><dd>647948</dd></dl>
    <dl><dt>你&nbsp;好&nbsp;你:</dt><dd>¥3454</dd></dl>
    <dl><dt>你  好:</dt><dd>128件</dd></dl>
</div>