アイコンを同じ並びの右端に表示させたい

Question

前提・実現したいこと

アコーディオンメニューを作っています。HTMLでは、liの中にulを入れ、さらにliを入れたものを作成しました。
実現したい動きとしては、ハンバーガーメニューの三本線のアイコンをタップすると、下に、4つのメニュー（トップページ、店舗情報、お知らせ、ブログ）が現れ、さらに、特定のメニュー（店舗情報、ブログ）には、右側にプラスのアイコンがあり、そこをタップするとその項目のメニュー（◎◎店・・・）がさらに現れるという形のものを作りたいです。三本線のアイコンを必要な位置に配置することはできています。ちなみにこの後は、Javascriptで、アイコンをタップしたらメニューが開いたり閉じたりを作ろうと考えています。

聞きたい事

①HTMLの書き方としては、以下でよいものか。
②divタグの中のアイコンを、「店舗情報」の右端に置きたい。店舗情報の下にきてしまう。
③CSSでの装飾をaタグだけにしているが問題ないか。

該当のソースコード

HTML↓

 <div class="overlay-menu">
      <ul>
        <li class="nonicon"><a href="">トップページ</a></li>
        <li class="icon"><a href="">店舗情報</a><div><i class="fas fa-plus-circle"></i></div>
          <ul class="overlay-menu-inner">
           <li><a href="">◎◎店</a></li>
           <li><a href="">◎◎店</a></li>
           <li><a href="">◎◎店</a></li>
        </ul>
      </li>
<li class="nonicon"><a href="">お知らせ</a></li>
      <li class="icon"><a href="">ブログ</a><div><i class="fas fa-plus-circle"></i></div>
       <ul class="overlay-menu-inner">
        <li><a href="">◎◎店</a></li>
        <li><a href="">◎◎店</a></li>
        <li><a href="">◎◎店</a></li>
     </ul>
    </li>
    </ul>
  </div>

CSS↓

  .overlay-menu a{
    display: block;
    line-height: 50px;
    width: 100%;
    background-color:rgb(54, 53, 53);
    color: #fff;
    font-size : 13px;
    padding-left: 10px;
    
  }

  .overlay-menu-inner a{
    background-color: rgb(29, 29, 29);
    padding-left: 20px;
  }

  .overlay-menu a:hover{
   background-color: orange;
  }

試したこと

②については、display:flexをしてみるなど試行錯誤してみましたが、うまくいきませんでした。

Comments

[Automatic9045]

コードを書き込むときは整形機能を使いましょう。
質問は投稿後でも編集出来ます。

Answer 1

divの中に aタグとアイコンを入れるようにして、display: flex; で横並びにしたらどうでしょうか。

    <li class="icon">
      <div><a href="">店舗情報</a><i class="fas fa-plus-circle"></i></div>
      <ul class="overlay-menu-inner">
        <li><a href="">◎◎店</a></li>
        <li><a href="">◎◎店</a></li>
        <li><a href="">◎◎店</a></li>
      </ul>
    </li>

.icon > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Comments

[kgtsk]

とても助かりました。できました。この度はありがとうございました。