How to align a button to the right of a text field without fields?

Question

How can I align the (send) button right to the right of the text or search field,
with the same height as the search box,
and without any horizontal space between the search box and the 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 no button has the same height as the text field


, and more importantly, I seem to be unable to get rid of this gap of 0.5 to 1 mm between the text box and the button.

Answer 1

Ah, I get it.

There are two problems at once.
First, there can be no spaces between the end of input 1 and the beginning of input 2.
Known IE bug.

And then, for buttons the same size as the text box, you need to apply the window size property

 -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; 

Like this:

 label, input { margin: 0.1em 0.2em; padding: 0.3em 0.4em; border: 1px solid #f90; background-color: #fff; display: block; height: 50px; float: left; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=text] { margin-right: 0; border-radius: 0.6em 0 0 0.6em; } input[type=text]:focus { outline: none; background-color: #ffa; background-color: rgba(255,255,210,0.5); } input[type=submit] { margin-left: 0; border-radius: 0 0.6em 0.6em 0; background-color: #aef; } input[type=submit]:active, input[type=submit]:focus { background-color: #acf; outline: none; } <form action="#" method="post"> <input type="text" name="something" id="something" /><input type="submit" value="It a button!" /> </form> 

Answer 2

  <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/

Answer 3

Add height to the button using CSS.

 .btn { font-size: 16px; border: 0; height: 34px; margin: 0; float:left; } 

Then add height to the textbox using the style attribute and check the heights match.

 <input type="text" value="" placeholder="search text here" style="height:28px;float:left;margin:0;" /> <input type="submit" value=" OK " class='btn' /> 

script: http://jsfiddle.net/suhailvs0/Ggg2b/7/

Answer 4

To display the submit button on the right side of your search, you need to change part of your code as follows. remove the left equalizer by the button code. and give the button 34 px

  <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: 40px; height: 34px; padding: 0px; " /> 

Answer 5

put this in the paragrapgh tag and there is no need for float: left

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

Answer 6

Increase the width e.g.

<input type="submit" value=" OK " style="display: block; margin: 0px; width: 100px; height: 32px; padding: 0px; float: left;" />

Answer 7

Put them in the container, set the fix width and height container. And set in the container only the percentage width. If you will use border-box: sizing; , you can add their border and pagging without a container with changes in width and height .

HTML:

 <div class="input-box"> <input class="input-1" type="text" value="" placeholder="search text here" /> <input class="input-2" type="submit" value="OK" /> </div> 

CSS

 .input-1, .input-2{ display: inline-block; height: 100%; margin: 0; padding: 0; float: left; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .input-1{ width: 70%; /* input-1 + input-2 = 100% */ } .input-2{ width: 30%; /* input-1 + input-2 = 100% */ } .input-box{ height: 32px; /* Own value - full height */ width: 200px; /* Own value - full width */ } 

Live demo. Now new, edited.

http://jsfiddle.net/Ggg2b/14/

Answer 8

I made some changes to the HTML markup. I wrapped the input fields in a div and assigned width and height to the divs instead of the input fields.

HTML

 <div class="mainCls"> <div class="textCls"> <input type="text" value="" placeholder="search text here" /> </div> <div class="submitCls"> <input type="submit" value=" OK " /> </div> </div> 

CSS

 input[type=text], input[type=submit] { margin: 0px; padding: 0px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; } div.mainCls { height: 35px; position: relative; border: 1px solid green; display:inline-block; } .mainCls>div { float: left; position: relative; height: 100%; } .textCls { width: 100px; } .submitCls { width: 30px; } 

Working script

If the input fields have a fixed width, as in your case, then there is no need for a child div, which I used above. You can simply add left: 100px; /* width of the input text */ left: 100px; /* width of the input text */ in the submit button .

Answer 9

I performed the same task for the search box, hope this can help someone.

 <input type="text" name="id" id="seacrhbox" class="form-control" placeholder="Type to search" style="width:300px;display:inline-block;margin-right: 25px;"/> <input type="submit" value="Search" class="btn-success" style="height:32px; width:80px;font-weight: 600;" /> 

Optional: (not relevant to the question)

If you want to keep the text field value in use asp / mvc:

value="@Request["id"]" , but if you want to do this in html try this