CSS中有一種實現列表豎排的方式,我們可以使用它來優化我們UI設計的效果。
ul { writing-mode: vertical-lr; margin: 0; padding: 0; text-align: right; } li { display: inline-block; transform: rotate(180deg); margin-left: 5px; }
如上代碼所示,我們首先給ul元素設置了writing-mode屬性,它的值為vertical-lr,表示讓列表項豎排,并且從上到下排列。而通過設置text-align:right屬性,我們還將整個列表右對齊了。
接下來我們再看li元素的設置,它們被設置為display:inline-block,使其能夠并排顯示。但是由于文字方向與我們想要的豎排方向相反,所以我們將它們進行了180度旋轉,以符合我們的預期。
通過上述的CSS代碼,我們可以輕松的實現一個豎排的列表效果。當然,我們也可以根據實際需要調整代碼中的一些屬性值,以達到更好的效果。
上一篇mysql的修改數據類型
下一篇css 切換代碼