CODEWITHSUNDEEP
htmlcss
TheLethalCoder
TheLethalCoder

Reputation: 6744

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

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):

Example image

.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:

Example bad output

Upvotes: 0

Views: 121

Answers (4)

connexo
connexo

Reputation: 56823

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>

Upvotes: 1

Kallum Tanton
Kallum Tanton

Reputation: 777

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/

Upvotes: 1

Trevor Nestman
Trevor Nestman

Reputation: 2526

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>

Upvotes: 1

user7390973
user7390973

Reputation: 63

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.

Upvotes: -1

Related Questions