teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コード追記

2020/11/04 06:09

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -20,4 +20,26 @@
20
20
  ```
21
21
 
22
22
  float で横並びする方法は既に自体遅れの手法です。
23
- Felxboxで横並びにすればこのようなことを気にせずに横並びにできます。
23
+ Felxboxで横並びにすればこのようなことを気にせずに横並びにできます。
24
+
25
+ Flexboxでの実装例。
26
+ floatのクリアは不要です。
27
+
28
+ ```css
29
+ .menu {
30
+ display: flex; /* 横並び */
31
+ justify-content: flex-end; /* 右寄せ */
32
+ /*float: right;*/
33
+ list-style: none;
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
+
38
+ .menu li {
39
+ width: auto;
40
+ /* float: left;*/
41
+ text-align: center;
42
+ list-style-type: none;
43
+ position: relative;
44
+ }
45
+ ```