响应式按钮 - 带姓名和号码

Question

我尝试创建一个相应的按钮，其中包含按钮的名称和数字。

我使用填充将按钮名称与数字分开，但是当数字非常高时，相同的数字会与按钮名称重叠。

有没有办法将名称放在按钮上居中并使按钮完全响应，而不管显示的数字如何？

演示版

网页

  <div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">

    <a style="color: #51CC8B;" class="btnP">Prepared

      <span class="nav-link btn-glyphicon1">1500</span>

    </a>

  </div>

CSS

.btnP {

  padding-right: 50px;

  padding-left: 8px;

  height: 24px;

  transition: all 0.3s ease 0s;

  cursor: pointer;

  white-space: nowrap;

  position: relative;

  text-decoration: none;

  display: flex;

  align-items: center;

  margin-right: 16px;

  text-align: center;

  font-weight: bold;

  font-size: 13px;

  font-family: 'Noto Sans', sans-serif;

  line-height: 6px;

  letter-spacing: 0;

  color: #51CC8B;

  -ms-border-radius: 16px;

  -o-border-radius: 16px;

  -moz-border-radius: 16px;

  -webkit-border-radius: 16px;

  border-radius: 16px;

  border-width: none;

  background: #EDFAF3;

  outline: none;

}

.btn-glyphicon1 { 

  padding: 8px;

  line-height: 6px;

  text-align: center;

  border-radius: 16px;

  right: 0;

  position: absolute;

  background: #DDF6E9 0% 0% no-repeat padding-box;

  font-size: 13px;

  font-family: 'Noto Sans', sans-serif;

  letter-spacing: 0;

  color: #51CC8B;

}

问题

正如您在图像中看到的，数字与名称重叠:(我希望文本始终保持在按钮的中心，并且宽度根据数字的大小进行调整。

有人能帮我吗？

Answer 1

.btnP {&nbsp; padding-right: 50px;&nbsp; padding-left: 8px;&nbsp; height: 24px;&nbsp; transition: all 0.3s ease 0s;&nbsp; cursor: pointer;&nbsp; white-space: nowrap;&nbsp; position: relative;&nbsp; text-decoration: none;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content:center;&nbsp; margin-right: 16px;&nbsp; text-align: center;&nbsp; font-weight: bold;&nbsp; font-size: 13px;&nbsp; font-family: 'Noto Sans', sans-serif;&nbsp; line-height: 6px;&nbsp; letter-spacing: 0;&nbsp; color: #51CC8B;&nbsp; -ms-border-radius: 16px;&nbsp; -o-border-radius: 16px;&nbsp; -moz-border-radius: 16px;&nbsp; -webkit-border-radius: 16px;&nbsp; border-radius: 16px;&nbsp; border-width: none;&nbsp; background: #EDFAF3;&nbsp; outline: none;}.btn-glyphicon1 {&nbsp;&nbsp; padding: 8px;&nbsp; line-height: 6px;&nbsp;&nbsp;&nbsp; border-radius: 16px;&nbsp;&nbsp;&nbsp; align-items:center;&nbsp; background: #DDF6E9 0% 0% no-repeat padding-box;&nbsp; font-size: 13px;&nbsp; font-family: 'Noto Sans', sans-serif;&nbsp; margin-left:20px;&nbsp; color: #51CC8B;}<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">&nbsp; &nbsp; <a style="color: #51CC8B;" class="btnP">Prepared&nbsp; &nbsp; &nbsp; <span class="nav-link btn-glyphicon1">1500</span>&nbsp; &nbsp; </a>&nbsp; </div>