Mehrere Spannen in einer Taste - Span Positionierung

Question

Ich versuche die Positionierung in der Schaltfläche zu überspannen, kann aber nicht herausfinden, wie es geht. Bitte hilf mir. Defferent-Taste, die stark reagiert.

Ich benutze Bootstrap.

Meine Erwartung: enter image description here

Aber Angezeigt: enter image description here

My-Code

.button-row { 
 
     height: 200px; 
 
     width: 180px; 
 
    } 
 
.button-radius { 
 
    border-bottom-right-radius: 2em; 
 
    -webkit-box-shadow: 0 8px 6px -6px black; 
 
\t -moz-box-shadow: 0 8px 6px -6px black; 
 
\t   box-shadow: 0 8px 6px -6px black; 
 
    white-space:normal; 
 
    word-wrap: break-word; 
 

 
} 
 

 
.label-top-left{ 
 
    position: relative; 
 
    left: -60px; 
 
    top: -90px; 
 
    display: inline-block; 
 
    padding:20px; 
 
} 
 

 
.label-top-right{ 
 
    position: relative; 
 
    left: 60px; 
 
    top: 90px; 
 
    display: inline-block; 
 
    padding:20px; 
 
} 
 
.label-bottom-right{ 
 
    position: relative; 
 
    right: -70px; 
 
    top: 36px; 
 
    display: inline-block; 
 
} 
 
.label-bottom-left{ 
 
    position: relative; 
 
    left: -60px; 
 
    top: 90px; 
 
    display: inline-block; 
 
} 
 
.gi-2x{font-size: 2em;} 
 
.gi-3x{font-size: 3em;} 
 
.gi-4x{font-size: 4em;} 
 
.gi-5x{font-size: 5em;}

<h3 class="text-warning">My Purchasing</h3> 
 
     <div class="row"> 
 
      <div class="col-md-3 col-sm-6 col-xs-12 button-container"> 
 
       <button type="button" onclick="location.href = 'Purchasing/PurchaseRequisitionRelease.aspx';" class="btn btn-default button-row button-radius"> 
 
        Approve Purchase Requisition 
 
        <span runat="server" id="spnPR" class="label label-warning label-top-right">1 Pending</span> 
 
        <span class="glyphicon glyphicon-list-alt gi-2x text-warning label-top-left"></span>      
 
       </button> 
 
      </div>    
 
      <div class="col-md-3 col-sm-6 col-xs-12 button-container"> 
 
       <button type="button" onclick="location.href = 'Purchasing/PurchaseOrderRelease.aspx';" class="btn btn-default button-row button-radius"> 
 
        Approve Purchase Order 
 
        <span runat="server" id="SpnNoti" class="label label-warning label-bottom-left">2 Notification</span> 
 
        <span runat="server" id="spnPO" class="label label-warning label-top-right">5 Pending</span> 
 
        <span class="glyphicon glyphicon-send gi-2x text-warning label-top-left"></span> 
 
       </button> 
 
      </div> 
 
      <div class="col-md-3 col-sm-6 col-xs-12 button-container"> 
 
       <button type="button" class="btn btn-default button-row button-radius" onclick="location.href = 'Purchasing/PurchaseHistory.aspx';"> 
 
        Purchase History      
 
        <span class="glyphicon glyphicon-time gi-2x text-warning label-top-left"></span> 
 
       </button> 
 
      </div>    
 
     </div>

Answer 1

Versuchen Sie dies funktionieren wird ...

.button-row { 
 
     height: 200px; 
 
     width: 180px; 
 
    } 
 
.sec1,.sec2,.sec3{ 
 
\t height: 70px; 
 
    margin: 0 !important; 
 
    margin-top: 8px !important; 
 
} 
 

 
.button-radius { 
 
    border-bottom-right-radius: 2em; 
 
    -webkit-box-shadow: 0 8px 6px -6px black; 
 
\t -moz-box-shadow: 0 8px 6px -6px black; 
 
\t   box-shadow: 0 8px 6px -6px black; 
 
    white-space:normal; 
 
    word-wrap: break-word; 
 

 
} 
 

 
.label-top-left{ 
 
    position: relative; 
 
    left: -60px; 
 
    top: -90px; 
 
    display: inline-block; 
 
    padding:20px; 
 
} 
 

 
.label-top-right{ 
 
    position: relative; 
 
    left: 60px; 
 
    top: 90px; 
 
    display: inline-block; 
 
    padding:20px; 
 
} 
 
.label-bottom-right{ 
 
    position: relative; 
 
    right: -70px; 
 
    top: 36px; 
 
    display: inline-block; 
 
} 
 
.label-bottom-left{ 
 
    position: relative; 
 
    left: -60px; 
 
    top: 90px; 
 
    display: inline-block; 
 
} 
 
.gi-2x{font-size: 2em;} 
 
.gi-3x{font-size: 3em;} 
 
.gi-4x{font-size: 4em;} 
 
.gi-5x{font-size: 5em;}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 

 

 
<h3 class="text-warning">My Purchasing</h3> 
 
     <div class="row"> 
 
         
 
      <div class="col-md-3 col-sm-6 col-xs-12 button-container"> 
 
       <a onclick="location.href = 'Purchasing/PurchaseOrderRelease.aspx';" class="btn btn-default button-row button-radius"> 
 
        <div class="row sec1" > 
 
\t \t \t \t \t \t <span class="glyphicon glyphicon-send gi-2x text-warning pull-left"></span> \t \t \t \t \t 
 
\t \t \t \t \t \t <span runat="server" id="spnPO" class="label label-warning pull-right">5 Pending</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="sec2"> 
 
\t \t \t \t \t \t Approve Purchase Order 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row sec3"> 
 
\t \t \t \t \t \t <span runat="server" id="SpnNoti" class="label label-warning pull-left">2 Notification</span> 
 
\t \t \t \t \t </div> 
 
        
 
       </a> 
 
      </div> 
 

 
      </div>