我需要保持右侧箭头总是正确的标题,但在某些情况下只有箭头下降。 (如果您移动小提琴预览手柄,您可能会看到)。以下是HTML结构和使用的CSS。
<div class="headline">
<h3>
<a href="#">Bowie comeback reaches number six<span class="arrow"> </span></a>
</h3>
</div>
CSS :
.headline {
padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) no-repeat;
display: inline-block;
height: 22px;
margin-left: 5px;
margin-top: 0;
position: relative;
top: 10px;
width: 15px;
}
小提琴:http://jsfiddle.net/9Mst7/
我是否有其他方法或最好的方法来赢得这个?
更新:当标题到达第二行时,箭头也应该坐在旁边。
答案 0 :(得分:4)
删除范围并在锚点<a>
上添加箭头图标作为背景图像。
HTML:
<div class="headline">
<h3>
<a href="#" class="arrow">Bowie comeback reaches number six ddd</a>
</h3>
</div>
的CSS:
.headline {
padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
padding-right: 10px;
background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) right center no-repeat;
}