如何用下面的文字制作一个水平的环列表

Question

我正在尝试使用 HTML/CSS 实现以下元素：

我一直在想办法让文字出现在圆环下方。我试过使用这样的 SVG 数据 URL 制作戒指：

SVG：

<svg aria-hidden='true' focusable='false'>
  <circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="transparent" />
</svg>

使用 https://yoksel.github.io/url-encoder/

编码

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3E%3Ccircle cx='25' cy='25' r='20' stroke='black' stroke-width='2' fill='transparent' /%3E%3C/svg%3E ");

我看过一些例子，最接近的例子之一是 https://material.angular.io/components/stepper/examples 的 Angular Material 步进器，但我不知道如何开始制作这个元素。至于 HTML，我认为按照以下代码片段应该没问题。

<ul class="ratings">
    <li>Gering</li>
    <li>Mittel</li>
    <li class="active">Hoch</li>
    <li>Sehr hoch</li>
</ul>

就上下文而言，这应该成为 Angular 网络应用程序中不可交互的显示元素。根本不需要 IE 支持，因此使用现代 CSS 的解决方案（我正在使用 SCSS）就可以了。

如果有人对这种高级 CSS 更有经验，我将不胜感激，可以给我一些关于如何构建此元素的指示。我最后的办法是使用光栅化图形，但结果会更糟。提前致谢！

到目前为止我尝试过的：

Creating CSS3 Circles connected by lines
https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem

更新：到目前为止，我的解决方案基于所选答案： https://jsfiddle.net/fkquce21/3/

Answer 1

您可能有很多不同的方法来解决这个问题，但严格遵守您分享的 HTML 结构，我会使用 CSS 来构建我的圈子而不是 SVG 并定位它们这样：

.ratings {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 0;
}

.ratings:before {
  content: " ";
  width: calc(100% - 100px);
  height: 1px;
  background: black;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ratings li {
  text-align: center;
  list-style: none;
  margin: 0 20px;
  position: relative;
}

.ratings li:before {
  content: " ";
  width: 20px;
  height: 20px;
  border: solid 2px black;
  border-radius: 50%;
  display: block;
  margin: 0 auto 5px;
  background: white;
}

.ratings li.active:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  display: block;
  background: black;
}

这里有一个live demo供您参考。

如何用下面的文字制作一个水平的环列表

How to make a horizontal list of rings with text below

html

css

sass

html-lists