html - 单个按钮中的多个跨度 - 跨度定位

Question

我正在尝试跨越按钮中的定位，但无法弄清楚如何去做。请帮帮我。不同的按钮作用不同。

我正在使用 Bootstrap。

我的期望:enter image description here

但显示:enter image description here

我的代码

.button-row {
        height: 200px;
        width: 180px;
    }
.button-radius {
    border-bottom-right-radius: 2em;
    -webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        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

尝试这会工作...

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

.button-radius {
    border-bottom-right-radius: 2em;
    -webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        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" >
						<span class="glyphicon glyphicon-send gi-2x text-warning pull-left"></span>					
						<span runat="server" id="spnPO" class="label label-warning pull-right">5 Pending</span>
					</div>
					<div class="sec2">
						Approve Purchase Order 
					</div>
					<div class="row sec3">
						<span runat="server" id="SpnNoti" class="label label-warning pull-left">2 Notification</span>
					</div>
                    
                </a>
            </div>

            </div>