html - 如何围绕一个圆创建文本(五度圆)

Question

HTML 和 CSS 的专业水平:初学者

目标:使用 HTML 和 CSS 添加围绕圆圈外部的文本，就像下面这样:

五度圈

进度: https://codepen.io/annieg4123/pen/GGPayQ

问题:当我定位一个字母时，它会影响其他字母的定位。例如，如果我将 left: 855px; 添加到 #Gb-Fsharp，#C 的位置就会改变。

问题:为什么会这样？我目前定位字母的方式不正确吗？如果是这样，我应该怎么做？

Answer 1

你必须给CSS文件正确的id，并给出字母的固定位置。我创建了您问题的示例 https://codepen.io/anon/pen/bKOyKQ

#circle {
   border: 1px solid black;
   border-radius: 50%;
   padding-bottom: 30%.......