内部带有动态数字的可缩放圆圈 [英] Scalable circles with dynamic numbers inside

查看：23
本文介绍了内部带有动态数字的可缩放圆圈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果有人问过并回答过这个问题，我深表歉意，因为我无法找到解决此问题的合适方法.

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

解决方案

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

html,身体 {边距:0；填充:0；宽度:100%；高度:100%；颜色:#9653DA；字体:600 14px 无衬线；}.导航表{显示:表；文本对齐:居中；}.导航行{显示:表格行；}.nav-col {显示:表格单元格；}.文本 {边距:1em；}.图标 {显示:内联块；边界半径:100%；边框:2px 实心；最小宽度:10px；填充:0.5em；边距:0.5em；}.icon div {位置:相对；高度:0；填充:50% 0；顶部:-7px；/* 字体大小的一半，在我们的例子中是 (14px/2) */}

<div class="nav-row"><div class="nav-col"><div class="icon"><div>20</div>

<div class="nav-col"><div class="icon"><div>300</div>

<div class="nav-col"><div class="icon"><div>50</div>

<div class="nav-col"><div class="icon"><div>1</div>

<div class="nav-row"><div class="nav-col"><div class="text">日语</div>

<div class="nav-col"><div class="text">主课程</div>

<div class="nav-col"><div class="text">非素食主义者</div>

<div class="nav-col"><div class="text">初学者</div>

Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.

I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached.

解决方案

It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.

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>

这篇关于内部带有动态数字的可缩放圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆