回答編集履歴
5
コードの修正
answer
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
|
6
6
|
デモではそちらの親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%指定でも大丈夫です。
|
|
7
7
|
|
|
8
|
-
動作デモ → [https://jsfiddle.net/
|
|
8
|
+
動作デモ → [https://jsfiddle.net/0o4kyb21/](https://jsfiddle.net/0o4kyb21/)
|
|
9
9
|
|
|
10
10
|
```css
|
|
11
11
|
.main-navigation {
|
|
@@ -25,4 +25,9 @@
|
|
|
25
25
|
display: inline-block;
|
|
26
26
|
margin-right: 20px;
|
|
27
27
|
}
|
|
28
|
-
```
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
※追記
|
|
31
|
+
大分時間がたった後に申し訳ありません。
|
|
32
|
+
リンク先にJavaScriptのコードが入ってしまっていたのですが、それは関係ないです。
|
|
33
|
+
元々あったコードを弄ってこの動作デモを作ったので、消し忘れが残ってしまっていました。
|
4
文章を分かりやすく修正
answer
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
※質問にはMarkdown記法を使用してください。
|
|
2
2
|
|
|
3
3
|
`.main-navigation`に、「`width: 100%;`」または「`left: 0;`と`right: 0;`」を追加してみてください。
|
|
4
|
-
今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
|
|
5
4
|
|
|
6
5
|
下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
|
6
|
+
デモではそちらの親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%指定でも大丈夫です。
|
|
7
7
|
|
|
8
8
|
動作デモ → [https://jsfiddle.net/urkqdw6t/](https://jsfiddle.net/urkqdw6t/)
|
|
9
9
|
|
3
コードを修正
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
※質問にはMarkdown記法を使用してください。
|
|
2
2
|
|
|
3
|
-
`.main-navigation`に、「`width: 100%;
|
|
3
|
+
`.main-navigation`に、「`width: 100%;`」または「`left: 0;`と`right: 0;`」を追加してみてください。
|
|
4
4
|
今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
|
|
5
5
|
|
|
6
6
|
下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
2
コードを修正
answer
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
※質問にはMarkdown記法を使用してください。
|
|
2
2
|
|
|
3
|
-
`.main-navigation`に、`width:
|
|
3
|
+
`.main-navigation`に、「`width: 100%;」`または「`left: 0;`と`right: 0;`」を追加してみてください。
|
|
4
|
+
今回は親要素の大きさが分からなかったので、表示上widthに100vwを使用していますが100%で大丈夫です。
|
|
5
|
+
|
|
4
6
|
下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
|
5
7
|
|
|
6
8
|
動作デモ → [https://jsfiddle.net/urkqdw6t/](https://jsfiddle.net/urkqdw6t/)
|
|
7
9
|
|
|
8
10
|
```css
|
|
9
11
|
.main-navigation {
|
|
10
|
-
width:
|
|
12
|
+
width: 100%; /* ←を追加するか */
|
|
11
13
|
position: fixed;
|
|
12
14
|
left: 0; /* ←と */
|
|
13
15
|
right: 0; /* ←を追加 */
|
1
句読点の追加
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
※質問にはMarkdown記法を使用してください。
|
|
2
2
|
|
|
3
3
|
`.main-navigation`に、`width: 100vw;`または`left: 0;`と`right: 0;`を追加してみてください。
|
|
4
|
-
下記リンク先の動作デモで背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
|
4
|
+
下記リンク先の動作デモで、背景に色を付けて色々とコメントアウトしてみると挙動が分かりやすいと思います。
|
|
5
5
|
|
|
6
6
|
動作デモ → [https://jsfiddle.net/urkqdw6t/](https://jsfiddle.net/urkqdw6t/)
|
|
7
7
|
|