0

I have a login form I'm creating... The problem is, I can't align the text boxes and text correctly.

It looks like this at the moment:

Align fail

But i need it to look like:

Correctly aligned, Text is all different sizes but text and textboxes are stacked up and not further to the left

This is very hard to explain. What I really want is for the text and text boxes to stay on the same X axis but the Y axis can be changed.

I think it requires a table, however I do not know how to use those. If it does require one, an explanation of how to use a table to align these forms would be great.

Thank you for your help.

  • Just give the labels a width. – Joerg Feb 28 '15 at 15:11
  • @Joerg I wrapped the text in ` –  Feb 28 '15 at 15:15
  • Have you looked at these answers: http://stackoverflow.com/q/10965155/82548http://stackoverflow.com/questions/13204002/align-form-elements-in-css, http://stackoverflow.com/q/8695327/82548 (among others)? Also, what's your (representative/minimal/"[MCVE](http://api.jquery.com/help/mcve)")? – David Thomas Feb 28 '15 at 15:17
  • @DavidThomas Yes, I have. The problem is, When there is a slight difference in the problem, I end up getting confused. That's why I asked my own question with my own details. –  Feb 28 '15 at 15:19
  • But you haven't shown enough information for us to offer a different, more precise solution, hence my question regarding your HTML. – David Thomas Feb 28 '15 at 15:27

2 Answers2

0

Use text-align with float/display: inline-block. Inputs are inside labels. Example.

<label>
    <span>username:</span>
    <input>
</label>

<label>
    <span>password:</span>
    <input>
</label>

<label>
    <span>country:</span>
    <select>
        <option>option
    </select>
</label>

<style>
    label {display: block; overflow: hidden; margin: 5px 0 0; height: 24px; line-height: 24px;}
    label > * {float: left;}
    label span {width: 90px; text-align: right; margin-right: 5px;}
    label span + * {width: 100px; height: 20px; line-height: 20px; padding: 0;}
</style>

http://jsfiddle.net/tb34rv1x/

Or the second (of many) option. Inputs are outside labels:

<label for="a">username</label>
<input id=a>

<label for="b">password:</label>
<input id=b>

<label for="c">country:</label>
<select id="c">
    <option>option
</select>

<style>
    label {float: left; clear: left; width: 100px; text-align: right; margin-right: 10px;}
    label + * {float: left;}
    * {margin-top: 5px;}
</style>

http://jsfiddle.net/tb34rv1x/1/

pavel
  • 26,538
  • 10
  • 45
  • 61
  • How can I center this? –  Feb 28 '15 at 15:28
  • 1
    http://jsfiddle.net/tb34rv1x/2/ - wrap that by `form` and add `display: table; margin: auto;` – pavel Feb 28 '15 at 15:30
  • THanks, But the problem is it's not exactly centered. How do I know? The submit button is in the center of the screen, A little bit more of the form is on the left rather than the right. –  Feb 28 '15 at 15:34
  • @MarkieJonesWTF: because labels has width and text, label's content doesn't fit well into this size. I think it's not a problem, and if it is, use `display: table/table-cell` values instead of floats. – pavel Feb 28 '15 at 15:44
0

Well if you are new to web dev just use the teble.

<table>
  <tr>
    <td>First name: </td>
    <td><input type="text" name="fname"></td>
  </tr>
  <tr>
    <td>Last name: </td>
    <td><input type="text" name="lname"></td>
  </tr>
</table>

Here is jFiddle: example

For more advanced version use div-s. Like Other post.

Community
  • 1
  • 1
  • No, form data aren't the table data. It seems to be easier to understand, but it isn't semantic. – pavel Feb 28 '15 at 15:31