通知が特定のボタンに表示されない

私はスパンクラスのボタンを持っています。特定のボタンの上に各スパンクラスを表示するのに問題があります。この画像のように。これどうやってするの？通知が特定のボタンに表示されない

.label{ 
 
    position: absolute; 
 
    top: 2.5rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://use.fontawesome.com/f574067864.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
<hr> 
 
<div class="container"> 
 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label label-success">4</span> 
 

 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label label-success">5</span> 
 

 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label label-success">6</span> 
 
</div> 
 
</body> 
 
</html>

は

出典

2016-07-12 Vishal Panara

この

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
    <script src="https://use.fontawesome.com/f574067864.js"></script> 
    <!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
    </head> 
    <style> 
    .sub-btn{ 
     position: relative; 
    } 
    .sub-btn span{ 
     position: absolute !important; 
     right: 0; 
     top: -15px !important; 
    } 
    </style> 
    <body> 
    <hr> 
    <div class="container"> 
    <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">4</span></button> 


    <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">5</span></button> 


    <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">6</span></button> 

    </div> 
    </body> 
    </html>

出典

2016-07-12 12:21:53

これも動作しています。確認された回答の資格が必要です。感謝 –

ありがとう@vishalパナラ –

ボタン

<div class="container"> 
    <button class="btn btn-default" type="submit">Button<span class="label label-success">4</span></button> 
    <button class="btn btn-default" type="submit">Button<span class="label label-success">5</span></button> 
    <button class="btn btn-default" type="submit">Button<span class="label label-success">6</span></button> 
</div>

内のスパンを追加し、このCSSを追加...ありがとう

.btn { 
    position:relative; 
} 
.btn>.label { 
    position: absolute; 
    top: -15px; 
    right: 0; 
}

Demo

出典

2016-07-12 12:11:25

を試してみて、私は、特定のボタンの上 –

特定のボタン手段をスパンクラスを表示したいですか？ –

更新された質問を見る –

あなたはそれが欲しいですか？編集

.label{ 
 
    position: absolute; 
 
    top: 2.5rem; 
 
} 
 
.button-label{ 
 
    margin-left:-25px; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://use.fontawesome.com/f574067864.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
<hr> 
 
<div class="container"> 
 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label button-label label-success">4</span> 
 

 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label button-label label-success">5</span> 
 

 
<button class="btn btn-default" type="submit">Button</button> 
 
<span class="label button-label label-success">6</span> 
 
</div> 
 
</body> 
 
</html>

出典

2016-07-12 12:17:25

はい...これは機能します。 –

これはうまくいきません。@Ravi sukhadiaの回答に続く他のすべてのデザイン変更は –

ohhhです。私は問題を待っています。 –

通知が特定のボタンに表示されない

答えて

関連する問題