Question

我有一个通知徽章，有时它是一个圆圈，但有时是椭圆形，具体取决于它里面的数字。假设我有5个新通知，因为它是一个小数字，徽章是一个很好的圆圈，但如果数字是22或523那么它是椭圆形的。有没有办法让这个徽章永远是一个圆圈？我正在使用materialize css，我的html / css代码如下：

＆＃13;

.notification-badge {
  position: relative;
  /*right: -12px;
  top: -84px;*/
  color: #ffffff;
  background-color: #FF4081;
  // margin: 0 -.8em;
  border-radius: 50%;
  padding: 4px 5px;
  font-family: "Roboto";
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}

＆＃13;

<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">22</small>
      </i>
  </div>
</a>

＆＃13;

以下是我当前结果的图片：

Answer 1

是。您需要在width上设置固定的.notification-badge，等于其height。

.notification-badge {
  width: 13px;
}

获取正确值的最简单方法是检查元素并在px中获取其高度。请注意，如果box-sizing设置为border-box，则padding和border中会包含width和height值。这很重要，因为您将不同的值设置为垂直和水平padding。因此，您很可能需要将width设置为2px低于height。为了将文本居中在现在固定的宽度元素中，您可能需要使用flexbox：

.notification-badge {
  width: 13px; /* set based on making it equal with height */
  display: flex;
  justify-content: center;
}

看到它正常工作：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
.notification-badge {
  position: relative;
  color: #ffffff;
  background-color: #FF4081;
  border-radius: 50%;
  padding: 5px;
  font-family: "Roboto";
  font-size: 12px;
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}
.notification-badge {
  width: 14px;
  display: flex;
  justify-content: center;
  letter-spacing: -1px;
}

＆＃13;

<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">22</small>
      </i>
  </div>
</a>
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">1232</small>
      </i>
  </div>
</a>
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
        <small class="notification-badge">3855</small>
      </i>
  </div>
</a>

＆＃13;

您还可以使用Javascript来设置元素的宽度：

$(window).on('load', function(){
  $('.notification-badge').each(function() {
    $(this).css({width: ($(this).height() - 2) + 'px'})
  })
})

注意我扣除2px填充差异。

Answer 2

当您使用JQuery时，这是一个解决您问题的方法。

if ($(".notification-badge").html().length == 3) {
  console.log("for 3 decimal");
  $('.notification-badge').css("padding", "8px 5px")
}

.notification-badge {
  position: relative;
  /*  right: -12px;
 top: -84px; */
  color: #66f;
  background-color: #FF4081;
  margin: 0 0.8em;
  border-radius: 50%;
  padding: 4px 5px;
  font-family: "Roboto";
  /*   font-size:40px; */
}

.notification-icon--fixed {
  max-height: 60px;
  width: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-activates="mdi-social-group-add" title="Convites" style="" class="notification-button notification-icon--fixed">
  <div class="block-elem">
    <i class="mdi-social-group-add large">
    <small class="notification-badge">248</small>
  </i>
  </div>

Answer 3

纯CSS可以实现这一点。

这是一个简单的例子，说明如何使用flexbox和一些填充技巧来保证元素的高度始终与其宽度相匹配。我删除了一些额外的HTML以使示例更清晰，这应该只需要很少的调整。

＆＃13;

.notification-icon--fixed {
  position: relative;
  color: #fff;
  background-color: #FF4081;
  border-radius: 50%;
  font-family: "Roboto";
  
  /* Alignment */
  line-height: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  
  /* Adjust as required: */
  padding: 10px;
}

/* Height = width */
.notification-icon--fixed::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

＆＃13;

<a class="notification-icon--fixed">
  <small class="notification-badge">1</small>
</a>

<a class="notification-icon--fixed">
  <small class="notification-badge">12</small>
</a>

<a class="notification-icon--fixed">
  <small class="notification-badge">1500</small>
</a>

＆＃13;

此技术的实质是在padding-bottom: 100%伪元素上设置::after，在display: inline-flex上设置对齐。

如何强制徽章永远是一个圆圈？

3 个答案: