多列均勻布局主要是利用了text-align:justify浙垫，但text-align:justify不處理塊內(nèi)的最后一行文本（包括塊內(nèi)僅有一行文本的情況，這時(shí)既是第一行也是最后一行）强重，也就是單行是不生效的，需要借助偽類after來(lái)實(shí)現(xiàn)多行贸人，并將:after設(shè)為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>
- 利用這種原理同樣可以處理表單元素文本長(zhǎng)度不一致的情況，justify可以使文本的兩端都對(duì)齊艺智。在兩端對(duì)齊文本中倘要，文本行的左右兩端都放在父元素的內(nèi)邊界上，例如帳號(hào)/用戶密碼描述長(zhǎng)度不一樣十拣。
<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>
