回答編集履歴

2

2019/12/19 08:59

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -21,6 +21,8 @@
21
21
 
22
22
 
23
23
  **横並びサンプル1**
24
+
25
+ ![イメージ説明](172c40380d07d4719274e80e1f2c580d.png)
24
26
 
25
27
  ```HTML
26
28
 
@@ -68,6 +70,10 @@
68
70
 
69
71
  **横並びサンプル2**
70
72
 
73
+
74
+
75
+ ![イメージ説明](29aed6cab8c98a5221d0de0927292a3f.png)
76
+
71
77
  ```HTML
72
78
 
73
79
  <ul class="test2">

1

2019/12/19 08:59

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -13,3 +13,85 @@
13
13
 
14
14
 
15
15
  本当にfloat:left; が正しいのかもう一度考えてみてください。
16
+
17
+
18
+
19
+ ------
20
+
21
+
22
+
23
+ **横並びサンプル1**
24
+
25
+ ```HTML
26
+
27
+ <ul class="test1">
28
+
29
+ <li>テスト1</li>
30
+
31
+ <li>テスト2</li>
32
+
33
+ <li>テスト3</li>
34
+
35
+ </ul>
36
+
37
+ ```
38
+
39
+ ```CSS
40
+
41
+ .test1{
42
+
43
+ display:flex; /* 横並び */
44
+
45
+ justify-content:space-evenly; /* 等間隔 */
46
+
47
+ }
48
+
49
+
50
+
51
+ .test1 {
52
+
53
+ list-style: none; /* マークを消す */
54
+
55
+ }
56
+
57
+ ```
58
+
59
+
60
+
61
+ [Flexboxレイアウトまとめ](https://qiita.com/takanorip/items/a51989312160530d89a1)
62
+
63
+
64
+
65
+ ---
66
+
67
+
68
+
69
+ **横並びサンプル2**
70
+
71
+ ```HTML
72
+
73
+ <ul class="test2">
74
+
75
+ <li>テスト1</li>
76
+
77
+ <li>テスト2</li>
78
+
79
+ <li>テスト3</li>
80
+
81
+ </ul>
82
+
83
+ ```
84
+
85
+ ```CSS
86
+
87
+ .test2 li {
88
+
89
+ display:inline; /* インライン要素に変更 */
90
+
91
+ }
92
+
93
+ ```
94
+
95
+
96
+
97
+ [CSSでリストを横並びのメニューにする](https://m-school.biz/dev/css-coding/004-css-menu.htm)