text-align:justify实践
2018-01-29 本文已影响0人
前端工程狮_jam
多列均匀布局主要是利用了text-align:justify，但text-align:justify不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行），也就是单行是不生效的，需要借助伪类after来实现多行，并将:after设为inline-block。
<style type="text/css">
.justify{
position: relative;
width: 80%;
height: 24px;
text-align: justify;
margin-bottom: 20px;
border: 1px solid #000;
}
i{
width: 24px;
line-height: 24px;
display: inline-block;
text-align: center;
background: #333;
color: white;
border-radius: 50%;
overflow: hidden;
font-style: normal;
}
.justify:after{
content: '';
width: 100%;
display: inline-block;
position: relative;
}
</style>
<body>
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<i>6</i>
<i>7</i>
<i>8</i>
</div>
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
</div>
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<i>6</i>
</div>
</body>
- 利用这种原理同样可以处理表单元素文本长度不一致的情况，justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，例如帐号/用户密码描述长度不一样。
<style type="text/css">
span {
width: 100px;
text-align: justify;
float: left;
}
span:after {
content: '';
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
input {
width: 100px;
}
<style>
<body>
<div class="demo">
<span>昵称</span>：
<input type="text" style='width: 100px'>
<br>
<br>
<span>电子邮箱</span>：
<input type="email" style='width: 100px;'>
</div>
</body>
