當我們做篩選框的時候,有的時候會需要篩選文字兩端對齊的情況,如圖
文字的對齊方式大都是通過設定text-align來實現,text-align屬性下有乙個justify值可以設定元素的兩端對齊。但是text-align: justify屬性有一些不足之處:
在單行文字下,無法實現兩端對齊效果。在多行文字下,無法實現最後一行文字的兩端對齊效果。
解決方法:一、由於在單行文字下和多行文字下最後一樣無法實現兩端對齊效果,因此給元素新增一行,即可實現justify的兩個不足之處。
二、僅單行文字時:text-align-last:justify;
**如下
<
!-- dom --
>
=>
="dv"
>呵呵<
/div>
="dv"
>嘻嘻嘻<
/div>
="dv"
>啦啦啦啦<
/div>
<
/div>
background-color: #eee;
}.dv
.dv:after
CSS兩端對齊
兩端對齊在導航條tab的製作中非常常用。本文將詳細介紹css兩端對齊的3種實現方式 彈性盒模型flex作為強大的彈性布局方式,可以hold住大部分的布局效果,當然也包括兩端對齊。可以使用主軸對齊justify content的兩端對齊屬性space between justify content s...
css實現兩端對齊
兩端對齊用text align justify 但怎麼解決單行不能兩端對齊呢,思路就是 讓瀏覽器認為這不是最後一行就行了 在元素裡面加乙個會換行的空的子元素比如 i style display inline block width 100 height 0 i li 效果如下 幾點注意事項 1 sp...
css實現文字兩端對齊
實現如下效果 css 實現如下 第一種方案 oldprice label oldprice label after active lists nowprice active lists nowprice label active lists nowprice points 原價 50元 首單價200...