【CSS】如何让列表水平排布,并且横向居中显示

发布网友发布时间：2022-05-13 04:31

共3个回答

懂视网时间：2022-05-13 08:52

列表等默认是纵向排列。我们需要它横向排列时通常会用float来实现，但是使用了float也通常会引发一些排版问题。今天我学到了另一种方法：
设定

标签的display:inline，把

设定为内联元素来实现横向排列的效果，不需要使用float。

列表横向排列的另一种方法 Item1
 Item2
 Item3
 Item4

效果：

等等，为什么li之间有空隙？？？

解决办法是：把li写成一行

 Item1
Item2
Item3
Item4

对，就是写成这样子（不知道是不是bug）

这个方法有一个弊端：li转为内联元素后，width、height就无效了，只能用padding来撑开宽高。也有一些不便。自己根据需要取舍吧。

热心网友时间：2022-05-13 06:00

.Lis{
float:left;
text-align:center;
}追问并没有用，设置float以后，再设置居中无效

追答您要让li 居中是吗？

热心网友时间：2022-05-13 07:18

对li使用左浮动，然后加个居中属性