CSS - Exact same height and alignment of button and input text box

Question

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

Answer 1

Your other option is to use Bootstrap. I solve this issue by assigning class "input-group" to the div that wraps the input and the button/s.

Answer 2

I'd suggest trying to style the parent element of the input/button pairing (a fieldset, in my example) in order to give a common font-size, and font-family, then using em measurements for styling dimensions/padding/margins for the child elements. Ideally styling all the child elements with the same CSS.

Given the following mark-up:

<form action="#" method="post">
    <fieldset>
        <label for="something">A label for the text-input</label>
        <input type="text" name="something" id="something" />
        <button>It's a button!</button>
    </fieldset>
</form>

I'd suggest something similar, but adapted to your particular design, to the following CSS:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

JS Fiddle demo.

---

Following the clarification that this is to replicate/reproduce the style of Google's adjoined text-input/submit button:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label, input, button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,
button:focus {
    background-color: #acf;
    outline: none;
}

JS Fiddle demo.

Albeit the above works fine in Chromium 12.x and Opera 11.5 (Ubuntu 11.04), Firefox seems to show an extra pixel or two in the latter demonstration.

Answer 3

I have checked many sources in WEB how to do it the best, cross-browser, theme-independent. I hope I have solution, bit it is not 100% (it needs to be trimmed by vertical CSS padding). My problem was to have label and text-input with the same width and compact.

Wished result: The solution I found by several experiments is described by my blog: http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

Solution CSS:

div.lf-ui-label {
  margin: 0px;
  font-size: inherit;
  font-weight: bold;
  background-color: #CCCCCC;
  border-width: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px -10px;
  font-size: inherit;
  background-color: #2b55a8 !important;
  vertical-align: middle;
  border-width: 0px;
}
input.lf-ui-form-item {
  background-color: #3b3b3b;
  font-size: inherit;
  padding: 4px 7px 4px 7px;
  font-weight: bold;
  border: none 0px;
  outline: none;
}

HTML:

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value"      style="width:71%" />
</div>
<div  style="padding:10px; font-family: Calibri; font-size: 14px;">
  Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>

My experimental code is shared by JSFIDDLE: css-exact-same-height-and-alignment-of.html

Answer 4

Anyone who's trying to do it now I found that this solution seems to work. Try adding :

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

to your current css on both elements which will still leave them slightly misaligned, and then play around with the top padding in the misaligned element. I found that :

padding-top: 2px;

worked for me.

Answer 5

In 2019 you want to be using CSS Grid for your forms even if they just have one input and one button.

This saves a lot of pain.

I have lots going on with my working example so I will not post a working example here. Instead, here are the things you need to know.

The outer container can be the form, CSS for this being display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

The input should have a label which I will assume is set to be hidden. So the CSS for the input has grid-column: 1; height: 100%; the button has grid-column: 2; height: 100%

You are going to do your own things with margins, backgrounds, paddings, borders, border radius and such like.

The crucial thing of getting the button to line up with the input is done with the grid row having a fixed height in ems or another sensible responsive friendly unit and the input and button being set to a height of 100%.

I did not find any of the above answers to result in as succinct and manageable code as the CSS Grid option which works for me on Firefox, Chrome and a Webkit based browser.

Note that if using CSS Grid then you need precisely zero div elements in your form, however, if using fieldsets you may need to set them to display: content as CSS Grid does not work with fieldset.

Answer 6

.sdiv {
padding-top: 33px;
padding-left: 33px;
height: 123px;
border: 1px dotted red;
border-radius: 7px;
background-color: Black;
}

.sbtn {
float:left;
height:24px;
width: 24px;
padding: 3px 0 0 0;
border:none;
margin-top: 14px;
background-color: white;
}

.stxt {
width: 180px;
height:22px;
float:left;
border:none;
padding-left:3px;
margin-top: 14px;
}

<div class="sdiv">
<form action="/">

<input class="stxt" type="text" placeholder="Search..." value="">

<button class="sbtn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" role="icon" viewBox="0 0 18 18" width="18" height="18">
<path fill-rule="evenodd" d="M 12.864 11.32 h -0.813 l -0.288 -0.277 A 6.66 6.66 0 0 0 13.38 6.69 a 6.69 6.69 0 1 0 -6.69 6.69 a 6.66 6.66 0 0 0 4.354 -1.617 l 0.278 0.288 v 0.813 L 16.467 18 L 18 16.467 l -5.136 -5.146 Z m -6.174 0 a 4.625 4.625 0 0 1 -4.632 -4.63 A 4.625 4.625 0 0 1 6.69 2.058 a 4.625 4.625 0 0 1 4.63 4.632 a 4.625 4.625 0 0 1 -4.63 4.63 Z" />
</svg>
</button>

</form>
</div>

All excellent answers! But none were really what I was looking for...

I got more satisfaction from more straightforward approach: