CSS讓ul列表橫向顯示的方法

在CSS中，我們可以通過(guò)設(shè)置ul列表的display屬性為flex或者inline-block，來(lái)實(shí)現(xiàn)橫向顯示的效果，下面我們來(lái)詳細(xì)講解一下這兩種方法。

1、使用flex布局

我們需要給ul列表添加一個(gè)新的class，horizontal-list，在CSS中設(shè)置該class的display屬性為flex，并且設(shè)置flex-direction屬性為horizontal，這樣，ul列表就會(huì)橫向排列了。

2、使用inline-block布局

除了使用flex布局外，我們還可以使用inline-block布局來(lái)實(shí)現(xiàn)橫向顯示的效果，我們需要給ul列表添加一個(gè)新的class，horizontal-list，在CSS中設(shè)置該class的display屬性為inline-block，這樣，ul列表就會(huì)橫向排列了，需要注意的是，使用inline-block布局時(shí)，我們需要給li元素添加一個(gè)新的class，list-item，并且設(shè)置該class的display屬性為block，這樣，li元素才會(huì)在橫向排列的同時(shí)保持一定的間距。

CSS提供了多種方法來(lái)實(shí)現(xiàn)ul列表的橫向顯示，我們可以根據(jù)自己的需求和喜好來(lái)選擇***適合的方法。