行內元素 兩端對齊

效果實現：

 

需求：兩個行內元素 實現兩端對齊

兩端對齊 是 

text-align: justify;

因為行內元素 不能設置寬度 所以 將行內元素變為 inline-block,或者block

發現依舊不可行

查看代碼，添加一個偽元素

完整代碼

.price .two-box .list li span {
   width: 1.29rem;
 text-align: justify;
     float: left;//浮動元素 自動轉化為block 這里的也可以是 display:inlinep-block
font-size: 0.29rem;
}
.price .two-box .list li span:after {
    content: '';
    display: inline-block;
    width: 100%;
}

 當然 如果文字不是動態讀出來的 ，也可以用 張旭鑫大神總結的空格填充內容 內容放這里了  方便以后查閱

https://www.zhangxinxu.com/wordpress/2015/01/tips-blank-character-chinese-align/

 

今天又遇到一個新的需求，因為 添加了偽元素，就會出現 多出的內容，為了使樣式正常，就需要 給 span添加高度 

但是 無法確定 是單行，多行，所以 不能設置高度，所以 這個方法 不適用 此時的需求 

 

多行文本對齊：text-align:justify

單行文本對齊：text-align:justify;text-align-last:justify

　　當為英文字母的時候，alice一個單詞 會被當做一個字符來識別 就會顯示為