Even sized input boxes that line up with each other, not the start of the text

Question

I have the following html code that is inside the body tag and with the css styles applied. I want to have the text boxes all line up with each other so it looks nice and even. However, I was only able to get them to be even sized so that the heading is above them, whereas I'd like them inlined. Something like (Excuse my paint skills, also I forgot to make the box lines thin that isn't something I want it to look like):

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

How can I do this?

Without any css styling it will look like this, which is what I don't want:

Kallum Tanton · Answer 1 · 2017-01-10T16:08:59.483

Here's the third option I originally provided - you set a fixed width for the label (and the same value for the <p> "padding-left" property: https://jsfiddle.net/p8zmhhwr/2/

.FormContainer {
  width: 500px;
}
.FormContainer p {
  position: relative;
  padding-left: 120px;
}
.FormContainer p:after {
  content: '';
  display: table;
  clear: both;
}
.FormContainer input,
.FormContainer label {
  display: inline-block;
  float: left;
  box-sizing: border-box;
}
.FormContainer input {
  width: 100%;
}
.FormContainer label {
  position: absolute;
  left: 0;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

The original 50/50% solution: https://jsfiddle.net/p8zmhhwr/, and the revised 70/30% solution: https://jsfiddle.net/p8zmhhwr/1/

This is a clearly inferior solution as this requires you to define a width for the label. Check what happens if you use a long label like *ZIP-Code (only if located in US)*. It is more complex regarding the code it requires and completely inflexible. — connexo, Jan 10 '17 at 16:15

score 1 · Answer 2 · answered Jan 10 '17 at 15:55

Not sure what technique you're wanting to use... Here's what I whipped up:

.FormContainer {
  max-width: 500px;
  text-align: center;
  clear: both;
}
.FormContainer label {
  display: inline-block;
  text-align: left;
  width: 100%;
  max-width: 120px;
}
.FormContainer input:not([type="submit"]){
  display: inline-block;
  width: 100%;
  max-width: 250px;
  clear: both;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

connexo · Accepted Answer · 2017-01-10T16:12:24.720

1

The most flexible way will be to make use of a CSS table. Over the other solutions provided, this does not ask you to define a width for the label (which you might not know beforehand in a dynamic world).

.FormContainer {
  width: 500px;
  clear: both;
}
.FormContainer input {
  width: 100%;
  clear: both;
}
.FormContainer form {
  display: table;
}
.FormContainer form p {
  display: table-row;
}
.FormContainer form p label,
.FormContainer form p input[type=text] {
  display: table-cell;
}
/* if the last paragraph in a form
always contains the submit button, add this: */

.FormContainer form p:last-child {
  display: block;
}

<div class="FormContainer">
  <form id="LoginForm" name="LoginForm" method="post">
    <p>
      <label for="EmailAddressLoginField">Email Address:</label>
      <input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField">
    </p>
    <p>
      <label for="PasswordLoginField">Password:</label>
      <input type="text" name="PasswordLoginField" id="PasswordLoginField">
    </p>
    <p>
      <input type="submit" name="LoginButton" id="LoginButton" value="Login">
    </p>
  </form>
</div>

edited Jan 10 '17 at 16:12

answered Jan 10 '17 at 16:03

connexo

53,704
14
91
128

Is there a way to add a bit more space between the text and input box? – TheLethalCoder Jan 10 '17 at 16:06
Add `.FormContainer form p label { padding-right: 10px; }` or whatever suits you. – connexo Jan 10 '17 at 16:08
Not sure if it is outside the scope of this question, but how can I vertically align the text to the centre of the input box. At the moment it is on the bottom. I tried `.FormContainer form p label { vertical-align: middle; }` but that seemed to affect the input box as well – TheLethalCoder Jan 10 '17 at 16:24
Please ask a new question and provide a snippet that clearly demonstrates the problem. As of now the snippet in my answer seems just fine. – connexo Jan 10 '17 at 19:19

score -1 · Answer 4 · edited May 23 '17 at 12:01

a table would be one possibility...

<div class="FormContainer">
<form id="LoginForm" name="LoginForm" method="post">
    <table>
        <tr>
            <td><label for="EmailAddressLoginField">Email Address:</label></td>
            <td><input type="text" name="EmailAddressLoginField" id="EmailAddressLoginField"></td>
        </tr>
        <tr>
            <td><label for="PasswordLoginField">Password:</label></td>
            <td><input type="text" name="PasswordLoginField" id="PasswordLoginField"></td>
        </tr>
    </table>
    <input type="submit" name="LoginButton" id="LoginButton" value="Login">
</form>
</div>

...see this question for other possibilities.

In modern web applications tables should only be used to display tabular data, certainly not for layout purposes. — Kallum Tanton, Jan 10 '17 at 15:54

Even sized input boxes that line up with each other, not the start of the text

4 Answers4