使li标签横向排列的三种⽅式⼀、display:inline
通过把li转换为⾏内元素实现，⾏内元素不独占⼀⾏，根据内容撑开⼤⼩
⼆、float：left
通过让li浮动实现横向排列 ，浮动会使li脱离⽂本流，且不占位置
三。通过flex布局实现
⾸先给⽗级定义flex，li{ flex:1}的意思为独占⽗级宽度的n分之1，这⾥的n取决于li的个数，也就是4分之1
html的flex布局