标题箭头始终与标题一起坐在右侧

我需要保持标题右侧的右侧箭头，但在某些情况下，只有箭头向下。（如果您移动可能会看到的小提琴预览柄）。以下是HTML结构和使用的CSS。标题箭头始终与标题一起坐在右侧

<div class="headline"> 
    <h3> 
    <a href="#">Bowie comeback reaches number six<span class="arrow">&nbsp;</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/

我是否有另一种方法或最好的取胜呢？

UPDATE：当标题来到第二行时，那么箭头应该坐在旁边。

来源

2013-03-19 samuk

我能想到的是把箭头定位在正确的唯一的解决办法'背景图片'到'h3'。它会看起来像这样：http://jsfiddle.net/9Mst7/2/ – Sunyatasattva 2013-03-19 13:00:50

@Sunyatasattva我认为这个解决方案适用于一行标题，但当标题来到第二行时，它并没有遵循。 – samuk 2013-03-20 14:51:26

那么，取决于你的意思是不遵循。它留在中心。我的理解并不完全是你想要的，这就是为什么我发布它作为评论而不是答案。只是给你一个你可能还没有考虑过的方向的指针。 – Sunyatasattva 2013-03-20 14:53:28

删除范围并在锚点<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; 
}

这里是小提琴：http://jsfiddle.net/6R6Ar/2/

来源

2013-03-19 13:00:00

我认为这个解决方案适用于一行标题，但当标题来到第二行时，它并不遵循。 – samuk 2013-03-19 13:37:07

Blasted IE。我创造了另一个解决方案，但它不是很漂亮。我用span.arrow包装了最后一个词。现在，当它包裹箭头跟随最后一个字。小提琴：http://jsfiddle.net/6R6Ar/3/ – 2013-03-19 14:57:38

标题箭头始终与标题一起坐在右侧

回答

相关问题