首先说明,这是“世界末日”过后的第一遍文章。“世界末日”它如我们所想象的一样没有来,生活仍在继续,该承受的还是要承受,该追求的还是要努力去追求。

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

文字左边对齐

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

<style>
.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;}
</style>


<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>

这就是此片文章的全部内容。下篇将会说道当右边内容多行,而又需要标题都在左边,多行内容都在右边,并且他们之间有一定的间距的排列方式。好了,洗洗睡吧,晚安!2012年12月23日。