アイコンを横並びにしたい。

Question

こんにちは。毎回のことなのですが、CSSが苦手です。慣れません（練習しているのですが）

今回はスマホ画面でアイコンを横並びにしたいのですが、（間違っているのか）反応せず困っています。何とかお力添えお願いします。

イメージ

実現したいこと

緑のアイコンを横に並べる。

コード

Django なので多少のタグは見逃していただけるとありがたいです。

<li class="nav-item article-menu-nav">
  <a href="{% url 'wiki:edit' article_id=article.id path=urlpath.path %}" class="px-3 nav-link{% if selected == 'edit' %} active{% endif %}">
    <span class="fa fa-edit"></span>
  </a>
</li>

<li class="nav-item article-menu-nav">
  <a href="{% url 'wiki:source' article_id=article.id path=urlpath.path %}" class="px-3 nav-link{% if selected == 'source' %} active{% endif %}">
    <span class="fa fa-lock"></span>
  </a>
</li>


<li class="nav-item article-menu-nav">
  <a href="{% url 'wiki:history' article_id=article.id path=urlpath.path %}" class="px-3 nav-link{% if selected == 'history' %} active{% endif %}">
    <span class="fa fa-clock"></span>
  </a>
</li>

  <li class="nav-item article-menu-nav">
    <a href="{% url 'wiki:plugin' slug=plugin.slug article_id=article.id path=urlpath.path %}" class="px-3 nav-link{% if selected == plugin.slug %} active{% endif %}">
      <span class="{{ plugin.article_tab.1 }}"></span>
    </a>
  </li>

<li class="nav-item article-menu-nav">
  <a href="{% url 'wiki:settings' article_id=article.id path=urlpath.path %}" class="px-3 nav-link{% if selected == 'settings' %} active{% endif %}">
    <span class="fa fa-wrench"></span>
  </a>
</li>

@media screen and (max-width: 400px) {
    .article-menu-nav {
        float: left;
    }
  }

試したこと

blockとflexは試しました。

Answer 1

以下のイメージでhtmlのlistに親要素divをつけてみてください　そしたら今度はcssでdivにdispley:flexをつける

<div>
　<li></li>
　<li></li>
　<li></li>
</div>

  .div {
    displey:flex
  }

Comments

[Kazuhiro-ch]

ご回答ありがとうございます。それは上記のCSSコードを残したうえで、追加しろということでしょうか？

[maring]

float: left;を指しているのであれば消して問題ないです。