Custom CSS buttons

Hi开发者_如何学编程,

I have some problems with an implementations off custom submit buttons.

pleas take a look on this : http://jsfiddle.net/snowman/xhxwS/9/

The submit button is placed on the wrong side of the text input. To fix this I could remove the following :

a.btn1 > float: left;
a.btn1 > display: block;
a.btn1 span > display: block;

The problem is that the image(button graphics) will look vary strange?

Pleas advice

<input type="text" value="" style="width: 100px; float:left;" name="S" id="S" class="tb1" title="Sökord">
<a onclick="" class="btn1">
    <span>Sök</span>
</a>

Simply add

float:left

to the input style and it places on the left, and the image on its right, as you wanted

This fixes it - put the elements in divs and float the divs

<div><div style="float:left"><input type="text" value="" style="width: 100px;" name="S" id="S" class="tb1" title="Sökord"></div>
<div style="float:left"><a onclick="" class="btn1">
    <span>Sök</span>
    </a></div>
<div style="clear:both"></div></div>