對齊頂部內部的跨度

Question

我想對齊右側頂部的紅色標籤block。這是我的進步http://jsfiddle.net/E2aWr/158/

html

<div class="block"> 
<a href="#"><img src="http://www.balloontothemoon.com/images/Bubbles.jpg"> 
<span class="red-sticker">1<p>2</p></span> 
</a> 
</div> 

css

.red-sticker { 
font-family: Arial,sans-serif; 
position: absolute; 
right: 0px; 
top: 0px; 
display: block; 
width: 32px; 
height: 32px; 
padding-top: 5px; 
font-size: 12px; 
line-height: 12px; 
text-align: center; 
float: left; 
color: #FFF; 
border-radius: 50%; 
background-color: #A50200; 
background-image: linear-gradient(to bottom, #CB0400, #A50200); 
} 
p:last-child { 
margin-bottom: 0px; 
} 

Answer 1

嘗試添加該到你的CSS：

​​

Answer 2

試試這個可以幫助

.block{position: relative;width: 284px;} 
 
.red-sticker { 
 
font-family: Arial,sans-serif; 
 
position: absolute; 
 
right: 0px; 
 
top: 0px; 
 
display: block; 
 
width: 32px; 
 
height: 32px; 
 
padding-top: 5px; 
 
font-size: 12px; 
 
line-height: 12px; 
 
text-align: center; 
 
float: left; 
 
color: #FFF; 
 
border-radius: 50%; 
 
background-color: #A50200; 
 
background-image: linear-gradient(to bottom, #CB0400, #A50200); 
 
} 
 
p:last-child { 
 
margin-bottom: 0px; 
 
}

<div class="block"> 
 
<a href="#"><img src="http://www.balloontothemoon.com/images/Bubbles.jpg"> 
 
<span class="red-sticker">1<p>2</p></span> 
 
</a> 
 
</div>

鏈接： http://jsfiddle.net/E2aWr/162/

Answer 3

所有你需要做的是使帶班「塊」有相對定位，因爲當你使用絕對定位需要的元素出包含div的文件流程。

.block { 
    position: relative; 
    width: 280px; 
} 

http://jsfiddle.net/E2aWr/158/

Answer 4

簡單的方法。

.block{ 
    position:absolute; 
} 

.red-sticker { 
    font-family: Arial,sans-serif; 
    position: absolute; 
    right: -10px; 
    top: -10px; 
    display: block; 
    width: 32px; 
    height: 32px; 
    padding-top: 5px; 
    font-size: 12px; 
    line-height: 12px; 
    text-align: center; 
    float: left; 
    color: #FFF; 
    border-radius: 50%; 
    background-color: #A50200; 
    background-image: linear-gradient(to bottom, #CB0400, #A50200); 
} 

這裏是的jsfiddle

的 working example