質問編集履歴

1

HTML5・CSS3コード追加

2017/01/21 02:40

投稿

KouichiWatanabe
KouichiWatanabe

スコア11

test CHANGED
File without changes
test CHANGED
@@ -10,17 +10,121 @@
10
10
 
11
11
  メニューバーを作成しているのですが、メディアクエリを599px以下設定したときに各コンテンツが均等に並べて表示したいのですが、改行が入ってしまいます。改行を入れることなく並べたいのですがどうしたら良いでしょうか?
12
12
 
13
- ```
14
13
 
15
- エラーメッセージ
16
14
 
17
- ```
15
+ ###HLML5コード###
18
16
 
19
- @media(max-width: 599px{
17
+ <div class="box2">
18
+
19
+ <nav class="menu">
20
+
21
+ <ul>
22
+
23
+ <li><a href="#"トップ</a></li>
24
+
25
+ <li><a href="#">雑貨</a></li>
26
+
27
+ <li><a href="#">ガジェット</a></li>
28
+
29
+ <li><a href="#">お出かけ</a></li>
30
+
31
+ <li><a href="#">食べ物</a></li>
32
+
33
+ <li><a href="#">お問い合わせ</a></li>
34
+
35
+ </ul>
36
+
37
+ </nav>
38
+
39
+ </div><!--box2-->
20
40
 
21
41
 
22
42
 
43
+ ###CSS3コード###
44
+
45
+
46
+
47
+ @media(min-width: 599px){
48
+
49
+ .menu ul{margin: 0;
50
+
51
+ padding:0;
52
+
53
+ list-style: none;}
54
+
55
+
56
+
57
+ .menu ul li{display: inline-block;}
58
+
59
+
60
+
61
+ .menu ul li{float: left;
62
+
63
+ width: auto;}
64
+
65
+
66
+
67
+ .menu ul li a{color: #000000;
68
+
69
+ text-decoration: none;
70
+
71
+ padding: 15px;
72
+
73
+ font-size: 14px;}
74
+
75
+
76
+
77
+ .menu ul li a:hover{background: #75dbe7;}
78
+
79
+
80
+
81
+
82
+
83
+ }/*@media 599px;*/
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+
92
+
93
+
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
23
- }
119
+ }
120
+
121
+
122
+
123
+
124
+
125
+
126
+
127
+
24
128
 
25
129
 
26
130