回答編集履歴
3
修正
test
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
> navを等間隔にしたいです
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
提供していただいたソースコードだと、上記は達成できていました。
|
|
6
|
+
|
|
7
|
+
おそらくこちらに提供していないソースコードを見ないと、適切に回答できないと思います。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
が、2点、もしかしたらこれで実現したいことへのヒントになるかも、というソースコードを挙げてみます。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
---
|
|
4
16
|
|
|
5
17
|
[1] 余白を均等にする
|
|
6
18
|
|
|
@@ -10,7 +22,7 @@
|
|
|
10
22
|
|
|
11
23
|
nav ul {
|
|
12
24
|
|
|
13
|
-
width: 100%;
|
|
25
|
+
width: 100%; /* ulが横方向に潰れてしまっているかもしれません。もしかしたらulでなくnavかもしれません。 */
|
|
14
26
|
|
|
15
27
|
}
|
|
16
28
|
|
|
@@ -18,11 +30,7 @@
|
|
|
18
30
|
|
|
19
31
|
---
|
|
20
32
|
|
|
21
|
-
|
|
33
|
+
[2] 横幅を均等にする (「等間隔にする」というのをあえて曲解)
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
[2] 横幅を均等にする
|
|
26
34
|
|
|
27
35
|
```CSS
|
|
28
36
|
|
2
修正
test
CHANGED
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
こちらでいかがでしょうか? ulでなくliに指定をする必要があるように思えます。
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
[1] 余白を均等にする
|
|
6
|
+
|
|
7
|
+
```CSS
|
|
8
|
+
|
|
9
|
+
/* 追加 */
|
|
10
|
+
|
|
11
|
+
nav ul {
|
|
12
|
+
|
|
13
|
+
width: 100%;
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
ちなみに、余白でなく横幅を均等にしたいなら、以下のような記述になると思います。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
[2] 横幅を均等にする
|
|
4
26
|
|
|
5
27
|
```CSS
|
|
6
28
|
|
|
@@ -23,9 +45,3 @@
|
|
|
23
45
|
}
|
|
24
46
|
|
|
25
47
|
```
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<a>と<li>に指定した`display: block;`は、`display: flex;`を活用してもOKと思われます。
|
|
30
|
-
|
|
31
|
-
最終的な見た目によって変わってくるので、ここでは`display: block;`を採用しました。
|
1
修正
test
CHANGED
|
@@ -10,14 +10,22 @@
|
|
|
10
10
|
|
|
11
11
|
flex: 1 1 0%;
|
|
12
12
|
|
|
13
|
+
display: block;
|
|
14
|
+
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
nav ul li a {
|
|
16
18
|
|
|
17
|
-
display: block;
|
|
19
|
+
display: block;
|
|
18
20
|
|
|
19
21
|
text-align: center; /* 文字の中央寄せ */
|
|
20
22
|
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
```
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
<a>と<li>に指定した`display: block;`は、`display: flex;`を活用してもOKと思われます。
|
|
30
|
+
|
|
31
|
+
最終的な見た目によって変わってくるので、ここでは`display: block;`を採用しました。
|