円の中に文字や記号が入ってるものをリストで3つ作りたいのですが、上手くいきません。

Question

円の中に文字や記号が入ってるものをリストタグを使って> 引用テキスト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 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 1px black;
  margin: 0 auto;
}

.navigation li {
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

このようにコードを書いたのですが、一つしか円ができないですし、1から3までのテキストの文字が1つの円の中に重なって入ってる状態です。

3つの円をちゃんと表示させて、最後には横並びにしたいと思っています。
横並びにするのは自分で考えてしてみたいので、なぜ円に文字が入ってる物が3つできないか、教えていただけないでしょうか？

上手く質問できなくて申し訳ございません。
よろしくお願いします。

Answer 1

コードは画像ではなく、<code>で描いた方が回答得られやすいです。（画像だけだと再現できないので。）
見た感じですと親クラスの.navigationが円になるcssのように見受けれます。

目指す形が円を3つ並べてその中心にテキストを表示するのであれば

１：.navigation liを円にする
２：.navigation li aを真ん中に表示する

にするべきな気がします。
再現できないのでわかりませんが。
参考までに。
https://coliss.com/articles/build-websites/operation/css/css-tutorial-circle-hover-effects-by-codrops.html

Comments

[shinaozora50]

教えてもらったのを参考にしたり、自分でも色々調べてやってみると、円の真ん中になり、横並びにもなりました。
後は、横並びにはなりましたが、ウインドウの幅に均等に3つの円を配置ができるようにするだけです。
また自分でも調べてできない場合、質問させてもらいます。
ありがとうございました。

[sunglass]

「レスポンシブ css」ですかね。
頑張ってください。

[shinaozora50]

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

[sunglass]

自己解決してよかったです。頑張ってください。

[shinaozora50]

コメントありがとうございます。
まだまだ分からないことばかりですが、頑張ってみます。