aligning text fields in css html form -


i'm trying make website form right side of text fields aligned

when change size of screen, text fields no longer in alignment. how can keep them aligned regardless of screen size?

here code:

<head>      <meta http-equiv="content-type" content="text/html; charset=utf-8">      <title>coat request form</title>        </head>      <body>        <form target="_top" action="https://www.salesforce.com/servlet/servlet.webtolead?encoding=utf-8" method="post">          <p>          <input type=hidden name="oid" value="00di0000000go95">          <input type=hidden name="returl" value="http://www.empowermentplan.org/#!thank-you/jiwpq">             <span style="display:inline-block" margin-right="30px">            <label class="required" for="first_name" style="display:block">first name</label>             <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>          </span>            <span style="display:inline-block">            <label class="required" for="last_name" style="display:block">last name</label>            <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>          </span>          <br>          <span style="display:inline-block">            <label class="required" for="email" style="display:block" >email</label>            <input id="email" maxlength="80" name="email" size="20" type="text" required/><br>          </span>            <span style="display:inline-block">            <label for="phone" style="display:block" >phone</label>            <input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>          </span>            <br>            <span style="display:inline-block">            <label for="company" style="display:block">company (optional)</label>            <input id="company" maxlength="40" name="company" size="20" type="text" /><br>          </span>            <span style="display:inline-block">              <label style="display:block">how many coats?</label>            <input  id="00ni000000h0cxe" name="00ni000000h0cxe" size="20" type="text" /><br>            </span>              <label style="display:block">who coats for?</label>          <textarea  id="00ni000000h0cy2" name="00ni000000h0cy2" rows="3" type="text" wrap="soft"></textarea><br>          <input type="submit" name="submit" class="btn">            <select style="visibility:hidden" id="00ni000000h0cxx" name="00ni000000h0cxx" title="topic">            <option type="hidden" value="coats">coats</option> </select><br>        </p>      </form>    </body>

you can use bootstrap purpose. use bootstrap style-sheet. bootstrap provides responsive web design design aligned automatically based on screen size. enclose fields in row. make 2 columns adding class "col-md-6", problem solved. more detail how use bootstrap visit this link.


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -