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

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 {

  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;

  justify-content: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;

  

  border-radius: 16px;

  

  align-items:center;

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

  font-size: 13px;

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

  margin-left:20px;

  color: #51CC8B;

}

<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>