回答編集履歴

1

作例を追加

2021/05/15 08:55

投稿

itagagaki
itagagaki

スコア8402

test CHANGED
@@ -1 +1,119 @@
1
1
  `.menu-item`を`display: flex;`にすればよいのでは。
2
+
3
+
4
+
5
+ (以下、追記)
6
+
7
+ うまくできないとのコメントを受けて、レイアウトの例を作ってみました。
8
+
9
+ もっと最適な解があるかもしれませんが、参考にしてください。
10
+
11
+
12
+
13
+ ```HTML
14
+
15
+ <main class="main">
16
+
17
+ <div class="menu">
18
+
19
+ <p>メニューリスト</p>
20
+
21
+ <ul class="menu-item">
22
+
23
+ <li class="menu-items">
24
+
25
+ <p>前菜</p><img src="https://tabicoffret.com/assets_c/2020/11/8f17801ed5e6921375f29d5b2b012b3a_1-thumb-700x467-194694.jpg" class="photo" />
26
+
27
+ </li>
28
+
29
+ <li class="menu-items">
30
+
31
+ <p>パスタ</p>
32
+
33
+ <img src="https://tabicoffret.com/assets_c/2020/11/8f17801ed5e6921375f29d5b2b012b3a_1-thumb-700x467-194694.jpg" class="photo" />
34
+
35
+ </li>
36
+
37
+ </ul>
38
+
39
+ </div>
40
+
41
+ </main>
42
+
43
+ ```
44
+
45
+ ```CSS
46
+
47
+ /* ボディ */
48
+
49
+ .main{
50
+
51
+ display: flex;
52
+
53
+ justify-content: center;
54
+
55
+ }
56
+
57
+
58
+
59
+ .menu{
60
+
61
+ display: flex;
62
+
63
+ flex-flow: column;
64
+
65
+ flex-wrap: wrap;
66
+
67
+ }
68
+
69
+
70
+
71
+ .menu p {
72
+
73
+ text-align: center;
74
+
75
+ margin: 0px;
76
+
77
+ }
78
+
79
+
80
+
81
+ .menu-item {
82
+
83
+ display: flex;
84
+
85
+ justify-content: space-between;
86
+
87
+ width: 230px;
88
+
89
+ padding: 0px;
90
+
91
+ }
92
+
93
+
94
+
95
+ .menu-items {
96
+
97
+ list-style: none;
98
+
99
+ text-align: center;
100
+
101
+ }
102
+
103
+
104
+
105
+ .menu-items p {
106
+
107
+ margin: 0px;
108
+
109
+ }
110
+
111
+
112
+
113
+ .photo {
114
+
115
+ width: 100px;
116
+
117
+ }
118
+
119
+ ```