Question

how can I align (vertically) some text input fields with CSS? eg in the following:

<form action= <?= $_SERVER[ PHP_SELF ]; ?>  method= post >
            <p><label for= username  class=  >Username:</label>
            <input type= text  name= username  id= username  class= field  value=   tabindex= 10  /></p>
            <p><label for= password  class=  >Password:</label>
            <input type= text  name= password  id= password  class= field  value=   tabindex= 20  /></p>
            <p><label for= e-mail  class=  >E-mail:</label>
            <input type= text  name= e-mail  id= e-mail  class= field  value=   tabindex= 35  /></p>
            <p><input type= submit  name= insert  id= insert  class= button  value= Insert!  tabindex= 40  /></p>
    </form>

Is there anything I can do, aside from using tables?

thanks Patrick

Answer 1

I think you mean you want the text boxes aligned with each other like the following. Tip: use the Internet Explorer Developer Tools, Firefox s FireBug or Opera s Dragonfly to tweak the styling attributes in you page.

<form action=   method= post >
<div style= clear:both >
    <label style= float:left;width:5em;display:block  for= username  class=  >Username:</label>
    <input style= float:left;display:block  type= text  name= username  id= username  class= field  value=   tabindex= 10  />
<div>
<div style= clear:both >
    <label style= float:left;width:5em;display:block  for= password  class=  >Password:</label>
    <input style= float:left;display:block  type= text  name= password  id= password  class= field  value=   tabindex= 20  />
</div>
<div style= clear:both >
    <label style= float:left;width:5em;display:block  for= e-mail  class=  >E-mail:</label>
    <input style= float:left;display:block  type= text  name= e-mail  id= e-mail  class= field  value=   tabindex= 35  />
</div>
<div style= clear:both >
    <input style= width:5em;display:block  type= submit  name= insert  id= insert  class= button  value= Insert!  tabindex= 40  />
</div>

友情链接