回答編集履歴

2

誤字修正

2020/02/21 10:35

投稿

hatena19
hatena19

スコア34084

test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
 
16
16
 
17
- 横並びflexを使うといいでしょう。
17
+ 横並びflexを使うといいでしょう。
18
18
 
19
19
  右寄せは、`margin-left: auto;`を付加します。
20
20
 
21
- 垂直位置中央寄せは`align-items: center;`です。
21
+ 垂直位置中央寄せは`align-items: center;`です。
22
22
 
23
23
 
24
24
 

1

説明追記

2020/02/21 10:35

投稿

hatena19
hatena19

スコア34084

test CHANGED
@@ -7,3 +7,53 @@
7
7
 
8
8
 
9
9
  BootStrapを使わずに実現したいとかですか。
10
+
11
+
12
+
13
+ > その通りです。BootStrapを使わずに実現したいです。
14
+
15
+
16
+
17
+ 横並びがflexを使うといいでしょう。
18
+
19
+ 右寄せは、`margin-left: auto;`を付加します。
20
+
21
+ 垂直位置を中央寄せは`align-items: center;`です。
22
+
23
+
24
+
25
+ ```css
26
+
27
+ .head {
28
+
29
+ display: flex;
30
+
31
+ align-items: center;
32
+
33
+ }
34
+
35
+ .head ul{
36
+
37
+ list-style: none;
38
+
39
+ display: flex;
40
+
41
+ align-items: center;
42
+
43
+ margin-left: auto;
44
+
45
+ }
46
+
47
+
48
+
49
+ .head>ul>li{
50
+
51
+ margin-right: 10px;
52
+
53
+ }
54
+
55
+ ```
56
+
57
+
58
+
59
+ [Flexbox の基本的な使い方/Web Design Leaves](https://webdesignleaves.com/pr/css/css_basic_10.html)