html - 内部带有动态数字的可缩放圆圈

Question

如果这个问题已经被询问和回答，我深表歉意，因为我找不到合适的解决方案来解决这个问题。

我需要处理需要将一些数字放在圆圈内的站点导航。圆圈的直径将根据内部文本的长度而增加。我正在为此寻找一个非常优雅的，最好是 css 的解决方案。请注意此处圆圈相对于所附模型上的整行和标签文本的对齐方式。

Answer 1

它需要一些 CSS 技巧才能使其正常工作，但这在最新版本的 Chrome 和 Firefox 中有效。如果您有任何其他问题，请告诉我。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #9653DA;
  font: 600 14px sans-serif;
}
.nav-table {
  display: table;
  text-align: center;
}
.nav-row {
  display: table-row;
}
.nav-col {
  display: table-cell;
}
.text {
  margin: 1em;
}
.icon {
  display: inline-block;
  border-radius: 100%;
  border: 2px solid;
  min-width: 10px;
  padding: 0.5em;
  margin: 0.5em;
}
.icon div {
  position: relative;
  height: 0;
  padding: 50% 0;
  top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}

<div class="nav-table">

  <div class="nav-row">
    
    <div class="nav-col">
      <div class="icon">
        <div>20</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>300</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>50</div>
      </div>
    </div>
    
    <div class="nav-col">
      <div class="icon">
        <div>1</div>
      </div>
    </div>
  </div>
  
  <div class="nav-row">
    
    <div class="nav-col">
      <div class="text">Japanese</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Main Course</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Non Vegetarian</div>
    </div>
    
    <div class="nav-col">
      <div class="text">Beginners</div>
    </div>
    
  </div>


</div>