Align Labels in Form Next to Input

Align labels in form next to input

WARNING: OUTDATED ANSWER

Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.


One possible solution:

  • Give the labels display: inline-block;
  • Give them a fixed width
  • Align text to the right

That is:

label {
display: inline-block;
width: 140px;
text-align: right;
}​
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>

Align labels in form next to input

WARNING: OUTDATED ANSWER

Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.


One possible solution:

  • Give the labels display: inline-block;
  • Give them a fixed width
  • Align text to the right

That is:

label {
display: inline-block;
width: 140px;
text-align: right;
}​
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>

label and input don't align like I want them to

What you want:

if you want all the elements, will be in a row,
so not like display: inline but one under other.

what to do:

just add display: grid in your parent element, in this case <form>

this automatically does for you, and is also responsive!

more details:

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

complete fixed code:

form {
display: grid;
}
<form action="mailto:12100834@student.pxl.be" method="post" enctype="text/plain">
<!-- 1 -->
<label for="id">Identificatie:</label>
<input type="text" id="id">


<!-- 2 -->
<label for="score">Score:</label>
<input type="text" id="score">


<!-- 3 -->
<label for="tijdstip">Tijdstip:</label>
<input type="radio" id="vm">
<label for="vm">VM</label>


<!-- 4 -->
<input type="radio" id="nm">
<label for="nm">NM</label>


<!-- 5 -->
<label for="opmerking">Opmerking:</label>
<textarea name="opmerking" id="opmerking" cols="30" rows="5"></textarea>

<!-- 6 -->
<input type="submit" value="Verzenden">
</form>

How to make label and input appear on the same line on an HTML form?

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {
/* Other styling... */
text-align: right;
clear: both;
float:left;
margin-right:15px;
}

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}
<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

How to align label and input with CSS

Add this:

p {
display:flex;
}

Fiddle: https://jsfiddle.net/py4x7zhk/

CSS Aligning labels with inputs

The easiest way to accomplish what you want is to wrap each label and input field in a div and have the text-align: center take affect on that element. You will need to apply some style to the wrapper in order for it to behave like an inline element and have the centering work.

This approach also avoids having to specify width on any of the elements which should allow it be more flexible in case you want to display on different screen sizes.

<div class='input-wrapper'>
<label for="email" class="formLabel">E-Mail Address</label>
<br />
<input type="text" name="email" value="" id="email" size="30" />
</div>

Then the style:

.input-wrapper {
display: inline-block;
text-align: left;
}

Here is a fiddle showing it working:
https://jsfiddle.net/ta0pesyb/

How to align label text (multi-language) in a single line justified above the input box

Use flex and justify-content: space-between for alignment:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}

p {
margin: 0px;
}

.d-flex{
width: max-content;
}
.text {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
}

::placeholder {
font-size: 14px;
font-weight: 600;
}
<div class="d-flex flex-column">
<div class="text">
<p>Customer Name</p>
<p>الاسم</p>
</div>
<input class="form-control mb-3" type="text" placeholder="Customer Name" name="name" required>
</div>

Aligning label with input type text

Working fiddle: https://jsfiddle.net/jennifergoncalves/nut5mzgj/10/

body {  background: url(ewp.jpg);  background-size: cover;}
.firstform { order-radius: 5px; background: green; padding: 20px; width: 550px; margin: auto; color: #fff; font-size: 16px; font-family: verdana; margin-top: 100px; opacity: 0.8;}
.firstform h1 { text-align: center; margin: 0; padding: 0;}
.firstform input,select { width: 50%; padding: 12px 20px; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 18px; background: black; color: white; opacity: 0.9; /* removed margin-left */}
.container { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; margin-left: 24em; cursor: pointer; font-size: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
/* Hide browser default radio button */
.container input { position: absolute; opacity: 0; cursor: pointer;}
/* Create custom radio button */
.checkmark { position: absolute; top: 0; left: 0; height: 15px; width: 15px; background-color: #eee; border-radius: 50%;}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark { background-color: #ccc;}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark { background-color: #2196f3;}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none;}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after { display: block;}
/* Style the indicator (dot/circle) */
.container .checkmark:after { top: 6px; left: 6px; width: 4px; height: 4px; border-radius: 50%; background: white;}
.buttonHolder { display: block; margin: 0 auto;}
.firstform input[type="submit"]:hover { background: #45a049; transparent: 0.6s;}
.firstform input[type="reset"]:hover { background: #45a059; transparent: 0.6s;}
label > span, p > span { width: 50%; display: inline-block;}
<div class="firstform">  <h1>Student Registration Form</h1>  <form action="Form1.php" method="post">
<p><label><span>First Name: </span><input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p> <p><label><span>Last Name: </span><input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p> <p><label><span>Age: </span><input type="number" name= "age" min="0" max="150"></label></p> <p><label><span>Date of Birth:</span><input type="date" name="date"></label></p>
<p><span>Gender:</span> <label class="container"> <input type="radio" name="gender" value="Male">Male <span class="checkmark"></span> </label>
<label class="container"> <input type="radio" name="gender" value="Female">Female <span class="checkmark"></span> </label>
</p>

<p><label><span>Nationality:</span><select name="nationality"> <option selected>Malaysia</option> <option>Bangladesh</option> <option>India</option> <option>African Nations</option> <option>South East Asia nations</option> <option>others</option> </select> </label>
</p>
<p><label><span>Address:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Postcode: </span><input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p> <p><label><span>State:</span><input name="state" list="state"> <datalist id="state"> <option value="Selangor"> <option value="Kuala Lumpur"> <option value="Kelantan"> <option value="Johor"> <option value="Malacca"> <option value="Perak"> <option value="Pahang"> <option value="Negeri Sembilan"> <option value="Sabah"> <option value="Sarawak"> <option value="Perlis"> <option value="Kedah"> <option value="Terengganu"> <option value="Penang"> </datalist> </label></p>
<p> <label><span>Email:</span><input type="email" name="email"> </label> </p>
<p> <label><span>Tel:</span><input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10"> </label> </p>
<div class="buttonHolder"> <input type="submit" name="Insert"><input type="reset" name="Clear"> </div>
</form></div>


Related Topics



Leave a reply



Submit