要素内の構成がうまくいきません。

Question

画像のようなリストを作りたいのですが、なかなかうまくいかずに手こずっています。
初心者で、コードもぐちゃぐちゃですが、教えていただけると助かります。

  <div class="p-main__contents__box">
          <div class="p-menu__login">
            <div class="p-menu__login--inner clearfix">
              <img src="img/recruit.png" class="p-menu__login--logoRecruit" alt="ログイン">
              <div class="p-menu__login--recruit clearfix">
                <a href="#" class="p-menu__login--link">
                  <div class="p-menu__login--info clearfix">
                    <p class="p-menu__login--infoTitle">リクルートIDでログイン</p>
                    <p class="p-menu__login--infoTitleSub">（旧じゃらん×ホットペッパーID）</p>
                  </div>
                  <img src="./img/serch_arrow.png" class="c-item__more--button-sns" alt="serch_arrow">
                </a>

                <a href="#" class="p-menu__membership--link">
                  <div class="p-menu__membership--info">
                    <p class="p-menu__membership--infoTitle">リクルートID 新規会員登録する</p>
                  </div>
                </a>
              </div>
            </div>
            <ul class="p-menu__membership-login">
              <li class="p-menu __membership-sns">
                <a href="#" class="p-menu__membership-sns-link">
                  <img src="./img/facebook.png" class="p-main__contents__snsLogo"alt="">
                  <div class="p-menu__sns-txt">Facebook</p>
                    <img src="./img/serch_arrow.png" class="c-item__more--button-sns" alt="serch_arrow">
                  </a>
                </li>
                <li class="p-menu__membership-sns">
                  <a href="#" class="p-menu__membership-sns-link">
                    <img src="./img/twitter.png" class="p-main__contents__snsLogo" alt="">
                    <p>Twitter</p>
                    <img src="./img/serch_arrow.png" class="c-item__more--button-sns" alt="serch_arrow">
                  </a>
                </li>
                <li class="p-menu__membership-sns">
                  <a href="#" class="p-menu__membership-sns-link">
                    <img src="./img/google.png" class="p-main__contents__snsLogo" alt="">
                    <p>Google</p>
                    <img src="./img/serch_arrow.png" class="c-item__more--button-sns" alt="serch_arrow">
                  </a>
                </li>
              </ul>
            </div>
          </div>

.p-menu__login{
  width: 90%;
  margin:20px;
}

.p-main__contents__snsLogo{
  width: 50px;
  height: 50px;
}

.p-menu__membership-sns{
  width: 100%;
line-height: 20px;
padding: 10px 0;
font-size: 15px;
border-bottom: dotted 4px #d3d3d3;
display: flex;
justify-content: space-between;
}

.c-item__more--button-sns{
  width: 30px;
  height: 30px;
  float: right;
  padding-right: 15px;
}
コード

Comments

[m.ts10806]

どうしたくてどうなっているのでしょうか。

[azuapricot]

「てこずっています」

何がどうなっててこずっているんですか？
上手くいかないところはどこですか？

何を試しましたか？

[azuapricot]

というか前回質問にも回答ついてますけど何のレスポンスもしてませんよね。
回答者の回答を試してうまくいったのか、いってないのかくらい返答したらどうでしょう。

前質問と今回の質問で聞きたい所は別ですか？前質問が解決したら今回の質問も解決するんじゃないですか？

[m.ts10806]

何を教えれば良いのでしょう。
現時点で教えられるのは「回答を得やすい質問の仕方」くらいです。
それもガイドラインには載ってるので読んできてから聞いて欲しいですね

Answer 1

画像のようなリストを作りたいのですが、なかなかうまくいかずに手こずっています。

初心者で、コードもぐちゃぐちゃですが、教えていただけると助かります。

HTML,CSSをうまく組めばできますよ

Comments

[m.ts10806]

いっそ全部画像で。
レイアウト崩れはないしどんな文字も使えるし！

[kyoya0819]

それいいですね

Answer 2

画像のようなリストを作りたいのですが、なかなかうまくいかずに手こずっています。
初心者で、コードもぐちゃぐちゃですが、教えていただけると助かります。

まず、どのような構成なのか整理して、それをもとにHTMLを書きましょう。

図を見ると、下記のような構成に見えます。（別の解釈も当然ありますので、一例です。）

ログインメニュー
　IDログイン
　　（アイコン　テキスト2行　矢印アイコン）
　　（ID新規登録）
　SNSログイン
　　（アイコン　Facebookでログイン　矢印アイコン）
　　（アイコン　Twitterでログイン　 矢印アイコン）
　　（アイコン　Googleでログイン　　矢印アイコン）

※（）で囲んだ部分は、aタグ内

この構造に沿うようにHTMLの構成を設計します。
クラス名もこれに合わせて分かり安いものをつけください。

HTMLが決まったら、それに合わせて、CSSでレイアウトを設計します。
（この時点でうまくいかない場合は、HTMLを見直すという場合もあります。）

（）で囲んだ部分が横並びなので、aタグにdisplay:flexを設定するという方法が考えられます。（これも一例です。）

自分の頭の中がごちゃごちゃのままでは、HTMLもCSSも当然ごちゃごちゃになります。
上記のような感じで整理しながら設計を進めてみてください。

その上で、もう少しピンポイントで、このようなコードを書いたが、この部分がこのようになってしまうが、想定ではこのようになってほしい、というように質問すると適切な回答がつくでしょう。