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

blogdaren 2013-06-07 抢沙发 1499人次

问题背景:

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

1.jpg 

重点说明:

必须定义标题的字体,这里我们设置字体为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>

版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

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

发表评论:

您的昵称:
电子邮件:
个人主页: