have hyperlink behave link display:block but also have image on same line?

I've got the following... http://jsfiddle.net/tLUkV/ I'd like my hyperlink to spread on till end of line like display: block; but I want the image on the same line like display: in-line; Is there a way to achieve a hybrid and get what I want?

EDIT: Just to clarify..

I'd like the image to the left and the hyperlink text right after it but the hyperlink itself开发者_如何学JAVA span the entire line

I would just set the link like a block and use the image as a background image for the link. Some left padding and it should appear exactly as you want it to.

a:link{
    display: block;
    background: url(http://www.w3schools.com/images/compatible_chrome.gif) no-repeat left center;
    padding-left: 30px;        /* whatever you need */
    line-height: 30px;         /* whatever you need */
}

Edit: changed height to line-height to have the text center vertically

If it's really a requirement for the link to extend all the way to the right, then the following would work:

img
{
    height: 20px;
    left: 0;
    position: absolute;
    width: 20px;
}
a
{
    display: block;
    line-height: 20px;
    margin-left: 20px;
}

Demo: http://jsfiddle.net/AyZ22/5/

Usually you would accomplish something like this with display: inline-block though.

using the image as a background would be the usual way to "iconify" links

here's a sample JSFiddle

(icon was actually bigger than your dimensions so fiddled to suit) you then just give the links a different class name to change their background