CSS浮动图像对齐

Question

我需要在一行的末尾添加此图像，这样

风格：

h4 { border-bottom: 1px solid black; font-size: 1.6em;}

我做过的代码：

<h4>Socializziamo <img src="flourish-decoration.png" 
    style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>

有没有更好的方法，因为我的解决方案有时不起作用......

的Riccardo

Answer 1

这是ggbhat's answer的替代方案。这里的方法是在嵌套图像上的标题和绝对定位上应用相对定位。

HTML

<h4>
    Socializziamo <img src="http://i.stack.imgur.com/68LQd.png" />
</h4>

CSS

h4 { 
    border-bottom: 1px solid black; 
    font-size: 1.6em;
    position: relative;
}

img {
    position: absolute;
    right: 0;
    bottom: -1px;
}

演示

http://jsfiddle.net/LqvTx/1/

Answer 2

使用：在伪元素之后添加背景图像。

h4
{ 
border-bottom:1px solid #000;
width:100px;
}


h4:after {
content:"";
background:url(http://i.stack.imgur.com/68LQd.png)no-repeat;
width: 30px;  
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}

演示：[http://jsfiddle.net/LqvTx/]