レイアウトを希望のものにしたい。

前提・実現したいこと

画像の様な名前付き写真を現在は縦になっているが、これを横並びにしたい。

Rubyでブラウザ上で料理を注文出来る様なシステムを作っています。
FlexBoxを使用しても上手く行かない為ご教授いただけると幸いです。

該当のソースコード

HTML
1<main class="main">
2  <div class="menu">
3    <ul class="menu-item">メニューリスト
4      <li class="menu-items">
5        前菜
6        <p><%= link_to image_tag("IMG_0557.jpg", class: :photo) %></p>
7      </li>
8      <li class="menu-items">
9        パスタ
10        <p><%= link_to image_tag("IMG_0557.jpg", class: :photo) %></p>
11      </li>
12     </ul>
13  </div>
14</main>

CSS
1/* ボディ */
2.menu{
3  display: flex;
4  justify-content: center;
5  flex-wrap: wrap;
6}
7
8.menu-item {
9  justify-content: space-between;
10}
11
12.menu-items {
13  text-align: center;
14}
15
16.photo {
17  width: 100px;
18}
19

試したこと

親要素はここで言うところのmenuクラスと捉え親要素に色々付加した。

補足情報（FW/ツールのバージョンなど）

rails ver _6.0.0_

Lhankor_Mhy

2021/05/15 08:41 編集

ul の中に直接文字列を入れるのは文法違反です。

darkblack

2021/05/15 08:50

ご回答ありがとうございます。なるほどですね！文法ルールの抜け漏れには気が付きませんでした。もう一度ルールを確認します。

行動規範の内容に同意します

回答1件

ベストアンサー

.menu-itemをdisplay: flex;にすればよいのでは。

（以下、追記）
うまくできないとのコメントを受けて、レイアウトの例を作ってみました。
もっと最適な解があるかもしれませんが、参考にしてください。

HTML
1<main class="main">
2  <div class="menu">
3    <p>メニューリスト</p>
4    <ul class="menu-item">
5      <li class="menu-items">
6        <p>前菜</p><img src="https://tabicoffret.com/assets_c/2020/11/8f17801ed5e6921375f29d5b2b012b3a_1-thumb-700x467-194694.jpg" class="photo" />
7      </li>
8      <li class="menu-items">
9        <p>パスタ</p>
10        <img src="https://tabicoffret.com/assets_c/2020/11/8f17801ed5e6921375f29d5b2b012b3a_1-thumb-700x467-194694.jpg" class="photo" />
11      </li>
12     </ul>
13  </div>
14</main>

CSS
1/* ボディ */
2.main{
3  display: flex;
4  justify-content: center;
5}
6
7.menu{
8  display: flex;
9  flex-flow: column;
10  flex-wrap: wrap;
11}
12
13.menu p {
14  text-align: center;
15  margin: 0px;
16}
17
18.menu-item {
19  display: flex;
20  justify-content: space-between;
21  width: 230px;
22  padding: 0px;
23}
24
25.menu-items {
26  list-style: none;
27  text-align: center;
28}
29
30.menu-items p {
31  margin: 0px;
32}
33
34.photo {
35  width: 100px;
36}