flexで横並びにしたテキストに下線をつけたい

Question

下の画像のようなものをcssで表現したいです。
![]

果物のリストと価格のリストをflexで横並びにしています。
しかし、flexで横並びでspace-aroundにしているので、下線を付けようとした時に
下の画像のようになってしまいます。

こちらが現在のhtml,cssです。
わかりにくい点もあるかと思いますが、ご回答よろしくお願い致します。

<div class="menu_wrap">
                    <ul class="menu">
                        <li class="blue_line">りんご</li>
                        <li class="blue_line">ぶどう</li>
                        <li class="blue_line">パイナップル</li>
                    </ul>
                    <ul class="price">
                        <li class="blue_line">100円</li>
                        <li class="blue_line">120円</li>
                        <li class="blue_line">220円</li>
                    </ul>
</div>

.menu_wrap {
    display: flex;
    justify-content: space-around;
}

.menu li {
    border-bottom:1px solid green;
}

.price li {
    border-bottom:1px solid green;
}

解答者様の方法を試したところ、このような形になりました。
フォントサイズは同じなのですがなぜつなぎ目の部分がずれるのでしょうか…
marginなども効かず...

Comments

[takna]

箇条書きリスト２つを組み合わせて無理やり表にするのは構造的に良ろしくないです。
表組みなので、素直にテーブルタグを使うのが正解です。

Answer 1

品名と価格は一対一で対応するものなので、それぞを別のリスト(ul)にするというHTML構造自体が意味的に実体と合致してません。
テーブルにするか、一つのリストにするべきだと思います。そうすれば、HTML構造と実体の意味が合致しますし、CSSもシンプルになります。

<div class="menu_wrap">
  <ul class="menu">
    <li class="blue_line">
      <div class="name">りんご</div>
      <div class="price">100円</div>
    </li>
    <li class="blue_line">
      <div class="name">ぶどう</div>
      <div class="price">120円</div>
    </li>
    <li class="blue_line">
      <div class="name">パイナップル</div>
      <div class="price">220円</div>
    </li>
  </ul>
</div>

.menu {
  max-width: 500px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.menu  li{
  display: flex;
  justify-content: space-between;
  border-bottom:1px solid green;
}

Comments

[yukiiiiiiiiiii]

同じulの中に記述したらよかったのですね、ありがとうございます！できました！

Answer 2

命題にちょっと無理がありそうです
あえてやるならこんな感じ

.menu_wrap {
display: flex;
 justify-content:center;
}
.menu,.price{
  list-style:none;
  padding:0;
}
.menu li {
 border-bottom:1px solid green;
  padding-right:150px;
}
.price li {
    border-bottom:1px solid green;
}

Comments

[yukiiiiiiiiiii]

ご回答ありがとうございます。
試してみたところ、"りんご"の線と"100円"のつなぎ目の線がうまく重ならず、
”100円"の線が少し上に表示される感じになりました。
font-sizeは同じに設定しているのですが...
これはしょうがない現象なのでしょうか...
また、無理があるというのはflexを使っているからでしょうか？
重ね重ね申し訳ございません、よろしければご教授お願いいたします。

[yambejp]

構造的に別のものを横方向に連結しているかのように振る舞うのが
無理があると思います。