Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align a button to the right of text box without margin?

Tags:

html

css

layout

How can I align a button (submit) exactly to the right of a text or search box,
with the same height as the search box,
and without any horizontal white-space between search box and button ?

This is what I have

<input type="text" value="" placeholder="search text here" style="display: block;  width: 100px; height: 32px; margin: 0px; padding: 0px; float: left;" />
<input type="submit" value=" OK "  style="display: block; margin: 0px;  width: 20px; height: 32px; padding: 0px; float: left; border-left: none;" />

http://jsfiddle.net/Ggg2b/

But neither is the button the same height as the textbox
, and more importantly, I don't seem to be able to get rid of that 0.5 to 1mm space between text-box and button.

like image 971
Stefan Steiger Avatar asked Aug 13 '13 05:08

Stefan Steiger


1 Answers

     <input type="text" value="" placeholder="search text here" class="txtbox" />
     <input type="submit" value=" OK "  class="btncls" />

        .txtbox{
            display: block;
            float: left;
            height: 32px;
            width: 100px;
        }

        .btncls{
            display: block;
            float: left;
            height: 40px;
            margin: -1px -2px -2px;
            width: 41px;
        }

OR Check on Fiddle http://jsfiddle.net/Ggg2b/9/

like image 160
Prats Avatar answered Nov 15 '22 04:11

Prats