teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【他の方法も募集中】float:left;を中央寄せしたい

編集履歴

質問編集履歴

3

編集

2018/11/12 17:46

投稿

hellohello
hellohello

スコア22

test CHANGED
File without changes
test CHANGED
@@ -1,50 +1,18 @@
1
- max-width:900pxとmax-width:780pxの二つで作ろうとしています。
2
-
3
-
4
-
5
1
  【実現したいこと】float:letf;をつけたliを中央に並べたいです。
6
2
 
7
3
 
8
4
 
9
- 【現状】flexboxで自己解決　→【他にも方法があれば今後のためにも探しています】
5
+ 追記【現状】flexboxで自己解決　→【他にも皆様が使われている方法があれば教えて頂きたいです】
10
6
 
11
7
 
12
8
 
13
9
 
14
10
 
15
- また、下記CSSはなぜ上手くいっていないのか、どなたか分かる方いらっしゃいましたら是非ご指摘頂きたいです。
16
11
 
12
+
17
- 下記はHTMLとCSS、参考サイトと上手く行かなかったCSS、自己解決方法を記述しております。　
13
+ 下記はHTML,自己解決方法を記述しております。　
18
14
 
19
15
  ```HTML
20
-
21
- <!DOCTYPE html>
22
-
23
-
24
-
25
- <html lang="ja">
26
-
27
- <head>
28
-
29
- <meta charset="utf-8">
30
-
31
- <title>aiueo</title>
32
-
33
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
34
-
35
- <link rel="stylesheet" href="css1">
36
-
37
- <link rel="stylesheet" href="css2" media="screen and (max-width: 900px)">
38
-
39
- <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
40
-
41
- </head>
42
-
43
-
44
-
45
- <body>
46
-
47
- <div class="top box">
48
16
 
49
17
  <nav class="menu">
50
18
 
@@ -54,137 +22,19 @@
54
22
 
55
23
  <li><i class="fa fa-caret-left fa-fw"></i>アイウエオ</li>
56
24
 
57
- <li><i class="fa fa-caret-right fa-fw"></i>アイウエ</li>
25
+ <li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li>
58
26
 
59
- <li><i class="fa fa-caret-right fa-fw"></i>アイウエオカ</li>
27
+ <li><i class="fa fa-caret-right fa-fw"></i>アイウエオ</li>
60
28
 
61
29
  </ul>
62
30
 
63
31
  </nav>
64
32
 
65
- </div>
33
+
66
34
 
67
- </div></div>
35
+
68
-
69
- </body>
70
-
71
- </html>
72
-
73
- ```
74
-
75
- ```CSS1
76
-
77
- .menu {
78
-
79
- padding:7px;
80
-
81
- }
82
36
 
83
37
 
84
-
85
- .menu ul {
86
-
87
- padding-left:30px;
88
-
89
- }
90
-
91
-
92
-
93
- .fa {
94
-
95
- color: #008BBB;
96
-
97
- }
98
-
99
-
100
-
101
-
102
-
103
- .menu li {
104
-
105
- float:left;
106
-
107
- display:block;
108
-
109
- list-style:none;
110
-
111
- font-size:90%;
112
-
113
- padding-right: 5%;
114
-
115
- box-sizing: border-box;
116
-
117
- }
118
-
119
-
120
-
121
- ```
122
-
123
- 失敗CSS[【参考】](https://www.acky.info/tips/css/00011.html)
124
-
125
- ```CSS2
126
-
127
- @media screen and (max-width:780px) {
128
-
129
- .top {
130
-
131
- float:none;
132
-
133
- width:auto;
134
-
135
- text-align: center;}
136
-
137
-
138
-
139
- div.box2 {
140
-
141
- margin:0;
142
-
143
- 　　　　　　　　　display:inline-block;}
144
-
145
- }
146
-
147
- ```
148
-
149
- 失敗CSS[【参考】](https://qiita.com/colorrabbit/items/178ea1ab16f727142421)
150
-
151
- ```CSS2
152
-
153
- @media screen and (max-width:780px) {
154
-
155
- 　.menu {
156
-
157
- position: relative;
158
-
159
- overflow: hidden;
160
-
161
- }
162
-
163
-
164
-
165
- .menu ul {
166
-
167
- position: relative;
168
-
169
- left: 50%;
170
-
171
- float: left;
172
-
173
- }
174
-
175
-
176
-
177
- .menu ul li {
178
-
179
- position: relative;
180
-
181
- left: -50%;
182
-
183
- float: left;
184
-
185
- list-style: none;}
186
-
187
- }
188
38
 
189
39
 
190
40
 

2

編集

2018/11/12 17:46

投稿

hellohello
hellohello

スコア22

test CHANGED
File without changes
test CHANGED
@@ -2,21 +2,17 @@
2
2
 
3
3
 
4
4
 
5
- 【実現したいこと】(max-width:780px)の際に,box1とbox2を上下に並べ（float解除）し、
6
-
7
- float:letf;をつけたliを中央に並べたいです。
5
+ 【実現したいこと】float:letf;をつけたliを中央に並べたいです。
8
-
9
-
10
-
6
+
7
+
8
+
11
- 【現状】flexboxで自己解決しましたが、他にも方法があれば今後のためにも探しています。
9
+ 【現状】flexboxで自己解決　→【他にも方法があれば今後のためにも探しています】
12
-
13
-
14
-
15
- 【問題点】borderをつけて確かめたが反映されないので、div.menu div.menu li に何をしても上手くいっていない
10
+
16
-
17
-
18
-
11
+
12
+
13
+
14
+
19
- 下記CSSはなぜ上手くいっていないのか、ご教授頂けないでしょうか？よろしくお願いいたします。
15
+ また、下記CSSはなぜ上手くいっていないのか、どなたか分かる方いらっしゃいましたら是非ご指摘頂きたいです。
20
16
 
21
17
  下記はHTMLとCSS、参考サイトと上手く行かなかったCSS、自己解決方法を記述しております。　
22
18
 
@@ -48,35 +44,7 @@
48
44
 
49
45
  <body>
50
46
 
51
- <header><div class="section-inner">
52
-
53
- <div class="header-logo">テキストテキストテキストテキストテキストテキスト</div>
54
-
55
- </div></header>
56
-
57
-
58
-
59
- <div class="boxA clearfix"><div class="section-inner">
60
-
61
- <div class="top box1">
47
+ <div class="top box">
62
-
63
- <div class="site">
64
-
65
- <h1>アイウエオあいうえお</h1>
66
-
67
- </div>
68
-
69
- </div>
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
- <div class="top box2">
80
48
 
81
49
  <nav class="menu">
82
50
 
@@ -152,7 +120,7 @@
152
120
 
153
121
  ```
154
122
 
155
- 試したもの[①](https://www.acky.info/tips/css/00011.html)
123
+ 失敗CSS[【参考】](https://www.acky.info/tips/css/00011.html)
156
124
 
157
125
  ```CSS2
158
126
 
@@ -178,7 +146,7 @@
178
146
 
179
147
  ```
180
148
 
181
- 試したもの[②](https://qiita.com/colorrabbit/items/178ea1ab16f727142421)
149
+ 失敗CSS[【参考】](https://qiita.com/colorrabbit/items/178ea1ab16f727142421)
182
150
 
183
151
  ```CSS2
184
152
 

1

情報追加

2018/11/12 16:31

投稿

hellohello
hellohello

スコア22

test CHANGED
@@ -1 +1 @@
1
- float:left;を中央寄せしたい
1
+ 【他の方法も募集中】float:left;を中央寄せしたい
test CHANGED
@@ -1,18 +1,24 @@
1
1
  max-width:900pxとmax-width:780pxの二つで作ろうとしています。
2
2
 
3
+
4
+
3
5
  【実現したいこと】(max-width:780px)の際に,box1とbox2を上下に並べ（float解除）し、
4
6
 
5
- （未解決）→float:letf;をつけたliを中央に並べたいです。
7
+ float:letf;をつけたliを中央に並べたいです。
6
-
8
+
9
+
10
+
7
- （現状）→上は中央配置できたのですが、リストはinline-blockをつけても出来ませんでした。
11
+ 【現状】flexboxで自己解決しましたが、他にも方法があれば今後のためにも探しています。
12
+
13
+
8
14
 
9
15
  【問題点】borderをつけて確かめたが反映されないので、div.menu div.menu li に何をしても上手くいっていない
10
16
 
11
17
 
12
18
 
13
- ご教授頂けないでしょうか？よろしくお願いいたします。
19
+ 下記CSSはなぜ上手くいっていないのか、ご教授頂けないでしょうか？よろしくお願いいたします。
14
-
20
+
15
- 下記はHTMLとCSS、参考サイトと上手く行かなかったCSSを記述しております。　
21
+ 下記はHTMLとCSS、参考サイトと上手く行かなかったCSS、自己解決方法を記述しております。　
16
22
 
17
23
  ```HTML
18
24
 
@@ -216,6 +222,22 @@
216
222
 
217
223
  ```
218
224
 
219
-
225
+ 自己解決方法
226
+
227
+ ```CSS
228
+
229
+ .menu {
230
+
231
+ display:flex !important;
232
+
233
+ align-items: center !important;
234
+
235
+ justify-content: center !important;
236
+
237
+ }
238
+
239
+
240
+
241
+ ```
220
242
 
221
243
  目を通して頂きありがとうございました！