浏览器中上面三个字，下面两个字 两端对齐（转）

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{width:75px;}
.t_w dl dd{width: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>

转载于:https://www.cnblogs.com/lly001/p/4996999.html