Databases
StackOverflow2013
Postsdbo
POHow to align input and select form elements in one row
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to align input and select form elements in one row
    text
    copied!<p>How can I align the <code>input</code> and <code>select</code> form elements in <a href="http://jsfiddle.net/cizmazia/KMVmw/" rel="nofollow">my test case</a>, so that their horizontal borders are aligned and all text including labels is aligned to the baseline?</p> <p>I want to have a <code>label</code> and an <code>input</code> form element along with another <code>label</code> and a <code>select</code> form element <em>in one row</em>. Therefore I want to have <em>horizontal</em> borders of <code>select</code> and <code>input</code> elements aligned, and I also want to have all text including labels aligned to the <em>baseline</em>. Is it possible?</p> <p>I was unable to achieve it on IE8 or FF on Win. I tried <code>box-sizing: border-box;</code> to force <code>input</code> and <code>select</code> to be rendered using the same box model.</p> <p>See <a href="http://jsfiddle.net/cizmazia/KMVmw/" rel="nofollow">my test case</a>, which has this code:</p> <pre class="lang-html prettyprint-override"><code>&lt;form action="Submit" method="post"&gt; &lt;p&gt; &lt;label&gt;Sex&lt;select&gt;&lt;option value="" selected="selected"&gt;Sex&lt;/option&gt;&lt;/select&gt;&lt;/label&gt; &lt;label&gt;Date of Birth&lt;input type="text" value="Date of Birth" /&gt;&lt;/label&gt; &lt;/p&gt; &lt;/form&gt; </code></pre> <pre class="lang-css prettyprint-override"><code>body, input, select { font-family: Helvetica,Arial,sans-serif; font-size: 12px; } select, input { height: 20px; padding: 0; margin: 0; border: 1px solid gray; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } label { padding: 0; margin: 0; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload