質問編集履歴

1

内容を変更しました。

2020/07/09 14:51

投稿

kageyama_tobio
kageyama_tobio

スコア18

test CHANGED
@@ -1 +1 @@
1
- メニューバーの固定したい
1
+ メニューの固定しようとfixedを使っのですがうまくきません
test CHANGED
@@ -1,8 +1,14 @@
1
1
  メニューバーを固定しようと
2
2
 
3
- potision:fixed;を使用したのですが
3
+ potision:fixed;を使用したのですが
4
4
 
5
- メニューバーにあった単語間バランス崩れてしまいうまいきません。
5
+ float効果なりheaderのbackground-colorも
6
+
7
+ 途切れてしまっています。
8
+
9
+ 何が原因で固定できないのでしょうか?
10
+
11
+
6
12
 
7
13
 
8
14
 
@@ -14,27 +20,59 @@
14
20
 
15
21
  html
16
22
 
17
- <ul>
23
+ <div class="header">
18
24
 
19
- <li><a href="#">Mac</a></li>
25
+ <div class="header-list">
20
26
 
21
- <li><a href="#">iPad</a></li>
27
+ <a href="#" class="btn apple">
22
28
 
23
- <li><a href="#">iPhone</a></li>
29
+ <span class="fab fa-apple"></span></a>
24
30
 
25
- <li><a href="#">Watch</a></li>
31
+ <ul>
26
32
 
27
- <li><a href="#">TV</a></li>
33
+ <li><a href="#">Mac</a></li>
28
34
 
29
- <li><a href="#">Music</a></li>
35
+ <li><a href="#">iPad</a></li>
30
36
 
31
- <li><a href="#">サポート</a></li>
37
+ <li><a href="#">iPhone</a></li>
32
38
 
39
+ <li><a href="#">Watch</a></li>
40
+
41
+ <li><a href="#">TV</a></li>
42
+
43
+ <li><a href="#">Music</a></li>
44
+
45
+ <li><a href="#">サポート</a></li>
46
+
33
- </ul>
47
+ </ul>
48
+
49
+ <a href="#" class="btn search">
50
+
51
+ <span class="fas fa-search"></span></a>
52
+
53
+ <a href="#" class="btn bag">
54
+
55
+ <span class="fas fa-shopping-bag"></span></a>
56
+
57
+ </div>
58
+
59
+ </div>
34
60
 
35
61
 
36
62
 
37
63
  css
64
+
65
+
66
+
67
+ .header {
68
+
69
+ background-color:rgba(1,1,1,0.9);
70
+
71
+ height:40px;
72
+
73
+ }
74
+
75
+
38
76
 
39
77
  .header-list li a {
40
78