css 兩端對齊

2021-10-12 21:59:09 字數 670 閱讀 6340

當我們做篩選框的時候,有的時候會需要篩選文字兩端對齊的情況,如圖

文字的對齊方式大都是通過設定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...