質問: 円の中に文字や記号が入ってるものをリストタグを使って> 引用テキスト3つ作りたいのですが、上手くいきません。! ``` 1.テキストテキストテキスト 2.テキストテキストテキスト 3.テキストテキストテキスト ``` ``` .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つできないか、教えていただけないでしょうか? 上手く質問できなくて申し訳ございません。 よろしくお願いします。
回答: コードは画像ではなく、で描いた方が回答得られやすいです。(画像だけだと再現できないので。) 見た感じですと親クラスの.navigationが円になるcssのように見受けれます。 目指す形が円を3つ並べてその中心にテキストを表示するのであれば 1:.navigation liを円にする 2:.navigation li aを真ん中に表示する にするべきな気がします。 再現できないのでわかりませんが。 参考までに。 https://coliss.com/articles/build-websites/operation/css/css-tutorial-circle-hover-effects-by-codrops.html