CSS中可以使用display属性的inline和inline-block值来让li元素横向排列,具体方法如下:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 10px;
}
上述代码将ul的内边距和外边距都归零,取消li元素的默认样式,并将li元素的display属性设置为inline-block,这样li元素就会像行内元素一样排列,但又可以设置宽度和高度,同时也可以设置padding和margin。
此外,如果想要让li元素之间没有空白缝隙,可以将ul元素的font-size属性设置为0,并将li元素的font-size属性设置为实际值,如下:
ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 0;
}
li {
display: inline-block;
padding: 10px;
font-size: 16px;
}
上述代码中ul元素的font-size属性设置为0,这样li元素之间的空白缝隙就会消失。