CSS. Link button from <span> tag

Sorry for noob question. I can't figure out how to create a link button. I want that two span tags to be inline, but get one under another.

HTML

<span style="display: inline">
<span class="icon-cancel"></span>
<span>Cancel operation</span>
</span>

CSS

.icon-cancel {
    display: block;
    background: no-repeat scroll 0 0 transparent;
    height: 16px;
    width: 16px;
}
.icon-cancel {
    background-image: ur开发者_开发技巧l("../img/ui/controls/cancel/cancel1.png");
}

Your inner <span> (.iconCancel) is display: block.

You should make it inline-block, so that it is laid out as an inline element but treated as a block element.

You need your friend, inline-block. Inline-block works for everything but IE 7 and prior. There is a hack to make it work for them too, which is the zoom and *display attributes, as seen below.

For this you apply it on the outside element. The styling for the insides looks good.

<span class="inlineblock">  
<span class="icon-cancel"></span>  
<span>Cancel operation</span>
</span>

And

 <style>
 .inlineblock{
     background:#ccc;
     display: inline-block;
     zoom: 1;
     *display: inline;
 } 
 </style>  

<span>
<div class="cancel icon-cancel"></div>
<div class="cancel">Cancel operation</div>
</span>

.cancel {
    background: no-repeat scroll 0 0 transparent;
    height: 16px;
    width:auto;
}
.icon-cancel {
    background-image: url("../img/ui/controls/cancel/cancel1.png");
    width: 16px;
}