CSSで作った円の中に文字が入ってる物を3つ横並びにはできたのですが、ウインドウの横幅に均等に3つ配置の方法が分かりません。

Question

CSSで作った円の中に文字が入ってる物を3つ横並びにはできたのですが、ウインドウの横幅に均等に3つ配置の方法が分かりません。

<div class="navigation">
      <ol>
        <li>
          <a href="">1.テキストテキストテキスト</a>
        </li>
        <li>
          <a href="">2.テキストテキストテキスト</a>
        </li>
        <li>
          <a href="">3.テキストテキストテキスト</a>
        </li>
      </ol>
  </div>

.navigation {
  height: 100px;
  width: 100%;
}

.navigation ol li{
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: solid 1px black;
  /* margin: 0 30px; */
}

.navigation  li a{
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 30%;
  width: 100%;
  text-align: center;
  line-height: 100px;
}

こんな感じにコードを書くと、下の画像のように文字の入った円は横並びになりましたが、ウインドウの幅に均等に3つ配置のやり方が分かりません。

ここからページの横幅に均等に3つの円を配置するには、どうしたらいいでしょうか？

まだWebサイト作成初心者で、上手く質問内容書けなくて申し訳ございません。
教えていただけないでしょうか？
よろしくお願いします。

Answer 1

.navigation ol {
  display: flex;
  justify-content: space-between;
  margin:0px;
  padding:0px;
}

Comments

[shinaozora50]

教えてもらったの試しましたが、やはり質問した時のまま、3つの円は左側に寄ってる感じで、均等には配置されませんでした。
せっかく教えてくださったのですが、すいません。

[shinaozora50]

olの横幅を設定を、ウインドウの幅にしてなかったので、ウインドウの幅に均等に配置されなかったみたいです。
幅を設定したら、教えてくださった通りにCSSをしたら、上手くいきました。
助かりました。
教えてくださってありがとうございました。

[shinaozora50]

上に書いたやり方じゃなくて、ヘッダーの中の幅を指定したら、その幅に均等に横並びすることできました。
教えてくださってありがとうございました。

Answer 2

flexを指定してjustify-contentsでSpace-のものをしてするといいです
リストを使わないでDiv等を使うといいかもです

Comments

[shinaozora50]

olの横幅を設定を、ウインドウの幅にしてなかったので、ウインドウの幅に均等に配置されなかったみたいです。
幅を設定したら、教えてくださった通りにCSSをしたら、上手くいきました。
助かりました。
教えてくださってありがとうございました。