Li RUONAN


一枚行走在前端道路上的程序媛 ~~


text-align

PM要求实现–两端对齐,我想这还不简单,text-align:justify 不就可以了麽,事实证明我失败了。

那么,今天我们就来聊聊 怎么做到“两端对齐”?

方法一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
<span>城市列表:<span>
<ul>
<li class="list">北京</li>
<li class="list">上海</li>
<li class="list">哈尔滨</li>
</ul>
</div>

<style>
#app ul {
width: 100px;
height: 60px;
backgroud-color: red;
text-align: justify;
}
.list {
list-style: none;
}
.list:after {
display: inline-block;
width: 100%;
height: 0;
content: '';
}
</style>

说起两端对齐,第一个想到的就是 text-align: justify. 没想到这个属性还挺有趣,text-align: center; text-align: right; 都没问题,偏偏 text-align:justify 无效。最后,发现这个属性确实有一些不足:

1. 在单行文本下,无法实现两端对齐效果。
2. 在多行文本下,无法实现最后一行文本的两端对齐效果。

说说原理,首先:两端对齐的思想会让我们想到word里面的两端对齐,其实是一样的,就是标签inline化,对每一行做布局的时候,让文字在行内实现两端对齐。其次,我们可以在元素的最后一行添加新元素,这样的话,就可以保证单行文本和多行文本字体两端对齐。当然,多了一行的结构,肯定是不好的,所有最好给最后一行添加样式,隐藏下去。

1
2
3
4
5
6
7
8
.list {
text-align: justify;
}
.list:after {
display: inline-block;
width: 100%;
content: '';
}