对齐顶部内部的跨度

问题描述：

我想对齐右侧顶部的红色标签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; 
}

答

尝试添加该到你的CSS：

答

试试这个可以帮助

.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/

答

所有你需要做的是使带班“块”有相对定位，因为当你使用绝对定位需要的元素出包含div的文件流程。

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

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

答

简单的方法。

.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

对齐顶部内部的跨度

相关推荐