html中的li和ul竖排显示,html中让ul的多个li在一行内显示

有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

*{

padding: 0;

margin-bottom:0;

border: 0;

}

.box{

width: 640px;

height: 50px;

overflow-x: scroll;

overflow-y: hidden;

}

ul{

display:inline;

white-space: nowrap;

}

ul li{

padding: 10px 20px;

display: inline-block;

background:pink;

white-space:nowrap;

}

随便写了下，好丑，不要在意细节哈哈哈~~~~