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
Elongated Hexagon Shaped Button Using Only One Element
Changing the Color of an Hr Element
Best Way to Include Css? Why Use @Import
Html Inside Twitter Bootstrap Popover
How to Uninstall a Service Worker
How to Find Unused Images and CSS Styles in a Website
What Is the HTML Tabindex Attribute
Embed Image in a ≪Button≫ Element
Closing HTML ≪Input≫ Tag Issue
Colspan/Rowspan For Elements Whose Display Is Set to Table-Cell
How to Close ≪Img≫ Tag Properly
Having Google Chrome Repeat Table Headers on Printed Pages
What Is the Functionality of !Doctype
How to Correctly Select the First or the Last Child With Css
How to Exclude Particular Class Name in CSS Selector
How to Position a Div Scrollbar on the Left Hand Side