html - 在顶部对齐 Div 内的 Span

Question

我想对齐 div 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

简单的方法。

.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);
}

这是 working example在 jsfiddle 中