HTML/CSS: Floating element in H2 element

This is the HTML:

<h2>
  Log in
  <a onclick="doSomething()" href="#" class="float-right">&nbsp;</a>
</h2>

This is the CSS:

.float-right {
    float: right;
    background: url(img.png);
    width: 10px;
    height: 10px;
    text-decoration: non开发者_开发知识库e;
}

So this should make the .float-right element float to the right of the text in the header, but in IE7 it doesn't! I don't care about IE6, I just have to get this working in IE7 and newer.

Have you tried to move the code around?

<h2>
  <a onclick="doSomething()" href="#" class="float-right">&nbsp;</a>
  Log in
</h2>

try adding display:block; to the css