圈出内联数字 [英] Circle around inline number

问题描述

我正在尝试围绕一个数字创建一个圆形边框，如下所示:

I'm trying to create a circle border around a number like so:

但到目前为止，我所有的尝试都产生了一个椭圆形:

But so far all my attempts have resulted in an oval:

Codepen 现场观看到目前为止的 SCSS 代码

Codepen to see it live SCSS code so far

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
    @return #{$pixels/$context}em;
}

body {
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'PT Sans', sans-serif;
    background: #e5dde1;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-nav {
    background-color: #ff4c61;
    color: white;
    font-family: 'Oswald', sans-serif;
}

.category-nav ul {
  background-color: #212d5b;
  color: #ff4c61;
  display: flex;
  justify-content: space-evenly;
}

.category-nav a {
  font-size: em(34);  
  text-decoration: none;
}

.category-nav .circled {
      border-radius: 50%;
      width: em(12);
      height: em(12);
      padding: em(4);
      border: em(1) solid #ff4c61;
}

HTML:

<header class="header-nav">
  <h1> APP</h1>
</header>
<nav class="category-nav">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C <span class="circled">3</span></a></li>
  </ul>
</nav>

到目前为止，我一直在尝试不同的解决方案，我认为问题主要来自于数字容器是内联元素(跨度)这一事实.每当我将 .circled 类切换到 div 或将显示设置为阻止时，我都会得到一个完美的圆圈，但随后数字被推出并破坏了 flex 布局.我想知道是否有任何方法可以让圆圈使用跨度工作?

I been experimenting different solutions so far and I think the problem comes mostly from the fact that container of the number is an inline element (span). Whenever I switch the class .circled to a div instead or set the display to block, I get a perfect circle but then the number is pushed out and it breaks the flex layout. I wonder if there's any way to get the circle to work with a span?

推荐答案

对于您的 .circled 类，您需要添加以下样式:

For your .circled class you need to add the following styles:

.category-nav .circled {
    ...
    line-height: em(12); /* needs to match the height */
    display: inline-block; /* needs to not be an inline element */
    text-align: center; /* center the character*/
}

这篇关于圈出内联数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！