列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置
1 | li{ float : left ;} |
示例如下:
创建Html元素
123456<
ul
>
<
li
>itemlist-1</
li
>
<
li
>itemlist-2</
li
>
<
li
>itemlist-3</
li
>
<
li
>itemlist-4</
li
>
</
ul
>
设置css样式
12ul{
width
:
500px
;
height
:
50px
;
line-height
:
50px
;
padding
:
10px
25px
;
border
:
4px
solid
#ebcbbe
;}
li{
padding
:
0
20px
;
float
:
left
;}
观察显示效果