中文词语字数不同时两端(等宽)对齐的方法小结-CSDN博客

菜鸡归纳学习个CSS基础小案例，顺便练习写文字。

很多时候我们会遇到需要将文字两端对齐的情况，可能是这样：

也可能是这样：

遇到这类情况，我们很可能为了整齐美观，需要将这些字数不同的词语等宽对齐。为了，我总结归纳了集中方法给大家参考。

效果如下

1、无脑的在文字中间插入转义字符来挤出空白间距

<ul>    
    <li>姓&emsp;&emsp;名：<input type="text"></li>
    <li>毕业院校：<input type="text"></li>
    <li>工作单位：<input type="text"></li>
    <li>所&ensp;在&ensp;地：<input type="text"></li>
</ul>复制代码

空格的转义字符分为如下几种：

 &160#;不断行的空白（1个字符宽度）
&ensp;&8194#;半个空白（1个字符宽度）
&emsp;&8195#;一个空白（2个字符宽度）
 &8201#;窄空白（小于1个字符宽度）

平时一般用的是  在中文中更适合用&emsp;

个人认为这种做法在两三个词语时使用还是可行的，简单粗暴。

2、通过`text-align: justify;`来达到两端对齐

justify这个属性就是实现两端对齐文本效果的意思。看似简单，但是W3C上给出了一大段的详细说明，介绍存在和使用时候的一些问题。如图：

图片出处链接：www.w3school.com.cn/cssref/pr_t…

看的心慌慌，但其实很多情景还是可以使用的。

但也别以为仅仅把对齐方式改为justify就可以了，事实上还不行。因为text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行），所以，我们可以用伪类来解决。当然，在后面加一个行内空标签来代替最后一行，这种实际上也能解决，但是因为这样违反了结构表现分离的原则，所以我觉得不要酱紫做哈。

<style>    ul li {        list-style: none; }    a {        text-decoration:none;        color: black;        font-size: 14px;    }    span {        margin: 0 10px;    }    .hotsearch dd {        float: left;        line-height: 24px;        margin-right: 30px;        overflow: hidden;        text-align: justify;        width: 5em;    }    .hotsearch dd:after {        content: " ";        display: inline-block;        width: 90px;    }    .test1 {        text-align:justify;        width: 90px;        display: inline-block;    }    .test1:after {        content: " ";        display: inline-block;        width: 90px;    }    .box {        width: 235px;    }    .box input {        float: right;    }</style>
<body>    <ul class="box">        <li><div class="test1">姓名</div><input type="text"></li>        <li><div class="test1">毕业院校</div><input type="text"></li>        <li><div class="test1">工作单位</div><input type="text"></li>        <li><div class="test1">所在地</div><input type="text"></li>    </ul>    <div class="main">        <span style="font-size:12px;">            <dl class="hotsearch" style="width:300px;">                <dt>热门搜索</dt>                <dd><a href="#" target="_blank" ref="nav" class="w3">荷花</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w4">向日葵</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w3">郁金香</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w2">鹿角海棠</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w2">六月雪</a></dd>                <dd><a href="#" target="_blank" ref="nav" class="w3">大花蕙兰</a></dd>            </dl>        </span>    </div></body>

复制代码

需要注意的是demo中test1类名下的所有元素都会平分空间来两边对齐，所有如果冒号、输入框用label修饰之类的话，就不能完美两边对齐排版。

3、通过`letter-spacing`来达到两端对齐

letter-spacing属性定义了在文本字符框之间插入多少空间。利用这点就能用来实现两端对齐。

<style>    .f2 {        letter-spacing: 2em;        margin-right: -1em;    }    .f3 {        letter-spacing: 0.5em;        margin-right: 0.5em;    }    .f4 {        margin-right: 1em;    }</style>
<body>    <ul class="box">        <li><label class="f2">姓名</label><input type="text"></li>        <li><label class="f4">毕业院校</label><input type="text"></li>        <li><label class="f4">工作单位</label><input type="text"></li>        <li><label class="f3">所在地</label><input type="text"></li>    </ul></body>
复制代码