HTML CSS examples for CSS Form:input
Vertically Align and Center Input Fields
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div.container {<!--from w w w.j av a 2 s .c o m--> width:351px; padding:16px; margin:51px auto 0px auto; clear:both; overflow:hidden; } div.container span.label-holder { display:block; width:calc(26% - 11px); float:left; padding:6px; } div.container span.input-holder { display:block; width:calc(76% - 11px); float:left; padding:6px; } div.container span.input-holder input[type="text"] { width:100%; } </style> </head> <body> <div class="container"> <form> <span class="label-holder"> <label for="url">Lor</label> </span> <span class="input-holder"> <input type="text" id="url" name="url" placeholder="url"> </span> <span class="label-holder"> <label for="code-base">Lorem ips</label> </span> <span class="input-holder"> <input type="text" id="code-base" name="Code-Base" placeholder="Code Base"> </span> <span class="label-holder"> <label for="from">Lore</label> </span> <span class="input-holder"> <input type="text" id="from" name="from" placeholder="From"> </span> <span class="label-holder"> <label for="to">Lo</label> </span> <span class="input-holder"> <input type="text" id="to" name="to" placeholder="To"> </span> <span class="label-holder"> <label for="email">Lorem</label> </span> <span class="input-holder"> <input type="text" id="email" name="email" placeholder="Your Email"> </span> <span class="label-holder"> <label for="app-serv">Lorem ipsum dolor s</label> </span> <span class="input-holder"> <select name="app-serv" id="app-serv"> <option value="Incent">Lorem </option> </select> </span> </form> </div> </body> </html>