CODEWITHSUNDEEP
htmlcss
AppDeveloper
AppDeveloper

Reputation: 2210

align labels and textfields

Is it possible to distribute space 50% for both label and input types with the following DOM content or the naive approach of creating separate tags for the label or the input.

DOM in question. how to approach with following DOM

<label for="first">First Name: <input id="first" type="text"/></label>
<label for="last">Last Name: <input id="last" type="text"/></label>
<label for="email">Email: <input id="email" type="text"/></label>

Visual Expectation

Labels 50% width

Input 50% width aligned on their left side

Naive approach separate labels and inputs

<label for="first">First Name: </label><input id="first" type="text"/>
<label for="last">Last Name: </label><input id="last" type="text"/>
<label for="email">Email: </label><input id="email" type="text"/>

CSS

label {
    width: 50%;
}
input {
    width: 50%
}

Upvotes: 0

Views: 77

Answers (4)

Ori Drori
Ori Drori

Reputation: 192877

If you're looking for an old school solution you can float the input to the right:

label {
  display: block;
  clear: both;
}

input {
  width: 50%;
  float: right;
}
<label>First Name: <input id="first" type="text"/></label>
<label>Last Name: <input id="last" type="text"/></label>
<label>Email: <input id="email" type="text"/></label>

You can style each label as a grid with two columns:

label {
  display: grid;
  grid-template-columns: 50% 50%;
}
<label>First Name: <input id="first" type="text"/></label>
<label>Last Name: <input id="last" type="text"/></label>
<label>Email: <input id="email" type="text"/></label>

Upvotes: 2

Prakruti Vavdiya
Prakruti Vavdiya

Reputation: 1

Try this one.. Nest your label and inputs in side a table and use width of 50% or 50vw for

Upvotes: 0

Roope
Roope

Reputation: 4507

div {
  width: 600px;
  background: #ccc;
}

label {
  display: inline-block;
  width: 50%;
}
input {
  box-sizing: border-box;
  width: 50%
}
<div>
  <label for="first">First Name: </label><input id="first" type="text" />
  <label for="last">Last Name: </label><input id="last" type="text" />
  <label for="email">Email: </label><input id="email" type="text" />
</div>

display: inline-block; let's you define the dimensions of the element without adding a line break after the element like display: block; would. box-sizing: border-box; let's you include the borders of the input element in its width (without this the actual width of the input would be over 50% and would cause a line break).

In case you wanted them to be on separate lines with 50% width, simply change inline-block to block, which will add the line break.

Upvotes: 1

V.Volkov
V.Volkov

Reputation: 739

Both variants:

label {
  display:flex;
  justify-content:space-between;
}
label > * {
  flex-basis:50%;
}
<label for="first">First Name: <input id="first" type="text"/></label>
<label for="last">Last Name: <input id="last" type="text"/></label>
<label for="email">Email: <input id="email" type="text"/></label>

label, input {
  display:inline-block;
  width:50%;
  box-sizing:border-box;
}
<label for="first">First Name: </label><input id="first" type="text"/>
<label for="last">Last Name: </label><input id="last" type="text"/>
<label for="email">Email: </label><input id="email" type="text"/>

Upvotes: 1

Related Questions