CSS 徽章宽度和高度答案

【问题标题】：CSS Badge width and heightCSS 徽章宽度和高度
【发布时间】：2015-07-01 09:27:59
【问题描述】：

我正在创建一些 CSS 徽章。问题是当数字为 100 或更大时，最后一个字符会从徽章中消失？

如果数字大于99，是否可以创建更大的徽章？

这是我的代码

CSS

.badge[data-badge]:after {
   content:attr(data-badge);
   font-size:.7em;
   background:rgba(48, 174, 227, 1);
   color:white;
   width:18px;
   height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
   margin-top: 7px;
   float:left;
}

HTML

<span class='badge' data-badge='27'></span>

这是工作小提琴 https://jsfiddle.net/kx5kow5m/

【问题讨论】：

您是否尝试设置width: auto;？
那么当我只有示例 1 时，徽章看起来不好看

标签： css badge

【解决方案1】：

设置width: auto 并在需要时添加填充。

width:auto;
padding: 2px;

示例：https://jsfiddle.net/kx5kow5m/2/

【讨论】：

问题现在好了，但如果我只有 1 个，那 bagde 不圆，试着说 1
@play2web 是的，我刚刚注意到了。等一下。

【解决方案2】：

尝试设置width: auto并添加min-width: 18px。

还可以添加一个填充：

width: auto;
min-width: 18px;
paddding: 4px;

Live Fiddle

【讨论】：

这适用于三位数。如果 OP 需要使用四位数字，它将失败。
对我来说看起来不错。他没有说过坏的应该是一个完美的圆圈。
在我的回答下看他的评论。