Question

有没有办法创建一个圆形徽章来显示一个数字，圆形徽章和数字是否符合字体大小？

我试过了：

＆＃13;

<input type="range" min="30" max="100" value="30" onchange="document.getElementById('d').style.fontSize=this.value+'px';"><br/>
<div id="d" style="position:relative;display:inline-block;font-size:30px;">
  <div style="position:relative;color:red;zoom:400%;">&#9679;</div>
  <div style="position:absolute;width:100%;height:100%;top:0px;left:0px;">
    <table style="position:absolute;width:100%;height:100%;top:0px;left:0px;text-align:center;font-size:inherit;">
      <tr><td>10</td></tr>
    </table>
  </div>
</div>

＆＃13;

滑块会更新父div的字体大小，因此徽章和数字的大小也会更新。它看起来与我想要的东西非常相似，但它有一个问题：无论我如何设置边距和填充，文本总是会转移到顶部。有没有办法解决视觉位置问题？或者有没有类似的方法来创建这样的响应式圆形徽章，中心有数字？

Answer 1

对于居中的圆圈，请使用此中心项目•而不是黑色圆圈●

Answer 2

你可以使用flexbox，它非常适合对齐事物：

<div class="badge">
<p>
1
</p>
</div>
<input type="range" min="30" max="100" value="30" onchange="document.querySelector('.badge').style.fontSize=this.value+'px';"><br/>

                                  col1                col2             col3
time                                                                         
05/04/2018 05:14:52 AM             +unend           +unend                  0
05/04/2018 05:14:57 AM                 0                 0                  0
05/04/2018 05:15:02 AM            30.691             0.000              0.121
05/04/2018 05:15:07 AM            30.691             n. def.            0.108
05/04/2018 05:15:12 AM            30.715             0.000              0.105

Answer 3

您可以简化标记并使用自定义属性来更改字体大小和红色圆圈的大小，例如。

Codepen demo

<强>标记

<input type="range" min="30" max="100" value="30" aria-controls="d">

<div id="d">
  <span>10</span>
</div>

<强> CSS

:root { --size: 30px; }

#d { 
  font-size: var(--size);
  margin: 20px 0 0 0;
}

#d span {
  font-family: Arial;
  padding: 10px;
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
  background-color: red; }

<强>的Javascript

var ctrl = document.querySelector('[aria-controls]');
var dde = document.documentElement;
ctrl.addEventListener('change',  function() {
   dde.style.setProperty('--size', this.value + 'px');
});

如何创建一个圆形徽章来显示数字，这是对字体大小的响应？

3 个答案: