回答編集履歴

1

説明追加

2021/04/08 06:54

投稿

hatena19
hatena19

スコア33620

test CHANGED
@@ -25,3 +25,69 @@
25
25
  }
26
26
 
27
27
  ```
28
+
29
+
30
+
31
+ ---
32
+
33
+ 以下、蛇足ですが、
34
+
35
+ float: left; での横並びにはもうやめましょう。まわりのレイアウトに副作用がありますので、いろいろ面倒です。
36
+
37
+ display: inline-block; を使うか、
38
+
39
+
40
+
41
+ ```css
42
+
43
+ nav li { /*区切り線*/
44
+
45
+ display: inline-block;
46
+
47
+ border-right: #d7d7d7 2px solid;
48
+
49
+ /* width: 106px; */
50
+
51
+ text-align: center;
52
+
53
+ padding: 5px 20px;
54
+
55
+ list-style: none;
56
+
57
+ }
58
+
59
+ ```
60
+
61
+ FlexBoxレイアウトを使うのがいいでしょう。
62
+
63
+
64
+
65
+ ```css
66
+
67
+ nav ul {
68
+
69
+ display: flex
70
+
71
+ }
72
+
73
+
74
+
75
+ nav li { /*区切り線*/
76
+
77
+ border-right: #d7d7d7 2px solid;
78
+
79
+ /* width: 106px; */
80
+
81
+ text-align: center;
82
+
83
+ padding: 5px 20px;
84
+
85
+ list-style: none;
86
+
87
+ }
88
+
89
+ ```
90
+
91
+
92
+
93
+ FlexBoxレイアウトの方が自由度が高いのよりお勧めです。