Align labels in form next to input
While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.
The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.
[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]
/* CSS */
div.settings { display:grid; grid-template-columns: max-content max-content; grid-gap:5px;}div.settings label { text-align:right; }div.settings label:after { content: ":"; }<!-- HTML -->
<div class="settings"> <label>Label #1</label> <input type="text" />
<label>Long Label #2</label> <span>Display content</span>
<label>Label #3</label> <input type="text" /></div>Make text input fields and their labels line up correctly
I think this is more of a CSS question;
Labels by default aren't a block level element and so won't accept a width. Try setting this CSS:
label{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
Hope that helps!
How to align input forms in HTML
Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.
.container { width: 500px; clear: both;}
.container input { width: 100%; clear: both;}<html>
<head> <title>Example form</title></head>
<body> <div class="container"> <form> <label>First Name</label> <input type="text" name="first"><br /> <label>Last Name</label> <input type="text" name="last"><br /> <label>Email</label> <input type="text" name="email"><br /> </form> </div></body>
</html>CSS to align label and input
This is one of those things which can be surprisingly tricky to get right.
Many people will suggest using float:left; for this. Personally, I really dislike floats; they seem to cause more problems than they solve.
My preference is to use inline-block. This is a display method that combines inline properties (so you can easily align elements next to each other, etc) with block properties (such as being able to specify dimensions).
So the answer is simply to make them both display:inline-block; and give the prompts a fixed width, which will make the input fields next to them line up.
You'll also need some sort of line feed or break after the input field, otherwise the next prompt will appear on the same line, which isn't the desired effect. The best way to achieve this is to put each prompt and its field into a container <div>.
So your HTML will look like this:
<fieldset id="o-bs-sum-buginfo" class="myfields">
<div>
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
</div>
<div>
<label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
<input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
</div>
....
</fieldset>
and your CSS will look like this:
.myfields label, .myfields input {
display:inline-block;
}
.myfields label {
width:200px; /* or whatever size you want them */
}
Edit:
you can use this plugin for setting the width of each label:
jQuery.fn.autoWidth = function(options)
{
var settings = {
limitWidth : false
}
if(options) {
jQuery.extend(settings, options);
};
var maxWidth = 0;
this.each(function(){
if ($(this).width() > maxWidth){
if(settings.limitWidth && maxWidth >= settings.limitWidth) {
maxWidth = settings.limitWidth;
} else {
maxWidth = $(this).width();
}
}
});
this.width(maxWidth);
}
from this page in a comment
and you use it this way:
$("div.myfields div label").autoWidth();
and thats all... all your labels are going to take the width of the longest label
How to align checkboxes and their labels consistently cross-browsers
Warning! This answer is too old and doesn't work on modern browsers.
I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).
As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).
After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:
- Inputs must be on their own line.
- Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
- If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).
Before I get into any explanation, I'll just give you the code:
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>Put a label and input type=text tag in the same row
Solution
- House both label and input into a single
div - Add
display: flexto the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited usingflex-direction: column labels typically don't haveids. Instead, they point toformelements containingids. I've fixed yourlabels in the following code- Duplicate
ids are a no-no as well (also fixed)
.row { display: flex; align-items: center; justify-content: flex-end;}
.input-field { margin-left: 1em; padding: .5em; margin-bottom: .5em;}<form id="survey-form"> <div class="row"> <label for="name">* Name:</label> <input type="text" id="name" class="input-field" required placeholder="Enter your name"> </div>
<div class="row"> <label for="email">* Email:</label> <input type="email" id="email" class="input-field" required placeholder="Enter your email"> </div></form>In-Field Labels Don't Line Up With Input Text
It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;
jsFiddle demo
The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.
Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.
How to align a Bootstrap form's input fields and labels?
You can do something like this:
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style> .container { margin: 5px auto; padding: 5px; color: #17A2B8; font-family: Verdana, Geneva, sans-serif; } h1 { text-align: center; } .btn, .btn-outline-secondary { border-color: #17A2B8; background-color: #17A2B8; color: #ffffff; } .btn:hover, .btn-outline-secondary:hover { background-color: #ffffff; color: #17A2B8; border-color: #17A2B8; } .show > .btn-outline-secondary.dropdown-toggle { color: #ffffff; background-color: #17A2B8; border-color: #17A2B8; }</style>
<div class="container"> <h1>Form</h1> <form> <div class="form-row"> <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6"> <label for="companyId">Company ID</label> <input type="text" class="form-control" id="companyId"> </div> <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-6"> <label for="companyName">Company Name</label> <input type="text" class="form-control" id="companyName"> </div> </div> <hr> <div class="form-row"> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemCode">Item Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Item Code 1</a> <a class="dropdown-item" href="#">Item Code 2</a> <a class="dropdown-item" href="#">Item Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="itemName">Item Name</label> <input type="text" class="form-control" id="itemName"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="brandCode">Brand Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Brand Code 1</a> <a class="dropdown-item" href="#">Brand Code 2</a> <a class="dropdown-item" href="#">Brand Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="brandName">Brand Name</label> <input type="text" class="form-control" id="brandName"> </div> </div> <div class="form-row"> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="categoryCode">Category Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Category Code 1</a> <a class="dropdown-item" href="#">Category Code 2</a> <a class="dropdown-item" href="#">Category Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="categoryName">Category Name</label> <input type="text" class="form-control" id="categoryName"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="subCategoryCode">Sub Category Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Sub Category Code 1</a> <a class="dropdown-item" href="#">Sub Category Code 2</a> <a class="dropdown-item" href="#">Sub Category Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="subCategoryName">Sub Category Name</label> <input type="text" class="form-control" id="subCategoryName"> </div> </div> <div class="form-row"> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="unitCode">Unit Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Unit Code 1</a> <a class="dropdown-item" href="#">Unit Code 2</a> <a class="dropdown-item" href="#">Unit Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="unitName">Unit Name</label> <input type="text" class="form-control" id="unitName"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="supplierCode">Supplier Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Supplier Code 1</a> <a class="dropdown-item" href="#">Supplier Code 2</a> <a class="dropdown-item" href="#">Supplier Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="supplierName">Supplier Name</label> <input type="text" class="form-control" id="supplierName"> </div> </div> <div class="form-row"> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="gstCode">GST Code</label> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">GST Code 1</a> <a class="dropdown-item" href="#">GST Code 2</a> <a class="dropdown-item" href="#">GST Code 3</a> </div> </div> </div> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="gstPercentage">GST Percentage</label> <input type="text" class="form-control" id="gstPercentage"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="sgstPercentage">SGST Percentage</label> <input type="text" class="form-control" id="sgstPercentage"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="cgstPercentage">CGST Percentage</label> <input type="text" class="form-control" id="cgstPercentage"> </div> </div> <div class="form-row"> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="costPrice">Cost Price</label> <input type="text" class="form-control" id="costPrice"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="sellingPrice">Selling Price</label> <input type="text" class="form-control" id="sellingPrice"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="mrp">MRP</label> <input type="text" class="form-control" id="mrp"> </div> <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3"> <label for="boxWeight">Box Weight</label> <input type="text" class="form-control" id="boxWeight"> </div> </div> <hr> <div class="col-auto my-1"> <button type="submit" class="btn"><i class="fa fa-save"></i> Save</button> <button type="submit" class="btn"><i class="fa fa-eraser"></i> Clear</button> <button type="submit" class="btn"><i class="fa fa-window-close"></i> Close</button> </div> <hr> </form></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script><script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>Styling Form with Label above Inputs
I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.
input, label { display:block;}<form name="message" method="post"> <section>
<div style="float:left;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div>
<div style="float:left;"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </div>
<br style="clear:both;" />
</section>
<section>
<label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> <label for="message">Message</label> <input id="message" type="text" value="" name="message">
</section></form>Related Topics
Can't Install Rmagick and Imagemagick on Windows 7
How to Use Factorygirl to Create an Attribute Called "Alias"
Did I Install Ruby 1.9.3 Correctly on Rhel
How to Merge Two Hashes That Have Same Keys in Ruby
Emacs Ruby Method Parameter Indentation
Zip Up All Paperclip Attachments Stored on S3
Rails Routing: Giving Default Values for Path Helpers
How to Completely Wipe Rubygems Along with Rails etc
How to Run Ruby in Haml in JavaScript Definition
How Does Ruby Handle Array Range Accessing
How to Declare a Rake Task That Depends on a Parameterized Task
Undefined Method 'Devise' When Including User Model Outside Rails
How to Run Two Methods in Parallel Ruby
Checking If Activerecord Find Returns a Result
Factory_Girl + Rspec Doesn't Seem to Roll Back Changes After Each Example
Is There a Shorthand If (Without Else) Statement in Ruby on Rails