Question

道歉，如果已经提出并已经回答过，因为我无法找到解决此问题的合适方案。

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

Answer 1

它需要一些CSS技巧来实现这一点，但这适用于最新版Chrome和Firefox。如果您有任何其他问题，请与我们联系。

＆＃13;

＆＃13;

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) */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;