关于文字对齐，上篇说道短标题（二，三，四文字长度）两端对齐的方式，这篇想说的是，短标题(右边多行)两端对齐的方式。

如下图，实际上，以我现在所知道，要实现下面这种排法，除了表格，或者两个子标签采用浮动的方法外，还有另外两种html的写法。这两种写法都用到了负margin的概念，这在我们平时的排版中显得比较怪异。好在它们大都能兼容各大浏览器。下面详细介绍它们的排版原理和代码组成块。

方法一：利用字标签的负margin和浮动，父标签的padding

<style>
.test{font-family:simsun;margin:20px;width:320px;line-height:22px;}
#test01 ul li{padding-left:70px;clear:both;color:#000;}
#test01 ul li span{float:left;margin-left:-70px;color:red;}
</style>

<div class="test" id="test01">
    <ul>
        <li><span>你好你好：</span>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内内容1</li>
        <li><span>你&nbsp;好&nbsp;你：</span>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</li>
        <li><span>你　　好：</span>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</li>
    </ul>
</div>

方法总结：行内元素浮动会自动变为块级元素。此类方法虽兼容大部分浏览器，不过对于IE6还是会显示有点怪异的地方，在第一行以后的内容会向前偏出几个像素，请看下列贴图：

方法二：利用字标签的负margin，子标签的padding和浮动

<style>
.test{font-family:simsun;margin:20px;width:320px;line-height:22px;}
#test02 ul li{clear:both;color:red;}
#test02 ul li span{color:#000;padding-left:70px;float:left;margin-top:-22px;}
</style>

<div class="test" id="test02">
    <ul>
        <li>你好你好：<span>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</span></li>
        <li>你&nbsp;好&nbsp;你：<span>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</span></li>
        <li>你　　好：<span>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</span></li>
    </ul>
</div>

方法总结：此种方法可以兼容各大浏览器，由于浮动的行内元素会自动转换成块级元素，所以这里需要给它设置一个负的margin-top，子标签的负margin值也就是行高的值。