Geek Answers Handbook

Aligning input fields?

How can I get my fields to align with each other if the text is longer than the others.

I have all this form in an unordered list.

I copied and displayed the code via jsFiddle, you can find what I am saying here ...

http://jsfiddle.net/EFByC/

+5
source share
6 answers

The tags <label>were wrapping tags <input>that caused a problem with processing them separately using CSS:

http://jsfiddle.net/EFByC/3/

+2
source

I would recommend you change your HTML form like this

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>
  • Give each form field a unique identifier
  • for , .

css #form-container label, :

width: 210px;

. .

+2

, . : block;

+1

:

  • , ( UL ).
  • ( ).
  • (, , - . ).

, , , , ( - . ). " ", for = "any".

, !

+1

There are several approaches to the formation of style. In this case, you can float the inputs and this will give you the result you want without changing the html.

See demo : http://jsfiddle.net/EFByC/8/

0
source

More articles:


All Articles