CSS to align label and input
Solution 1
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 */
}
Hope that helps.
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);
}
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
Solution 2
#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}
Solution 3
I think using javascript for a simple css trick is overkill. Here is the one i made just now: http://jsfiddle.net/t6R93/
div{
display: table-row;
}
label,input{
display:table-cell;
}
PS: It may have flaws with other browsers. I only tested with Chrome.
Solution 4
Put the every label with its corresponding input into a p tag. Then add the following css:
label{
float:left;
width:100px; //whatever width that suits your needs
}
p{
margin:10px 0; //manipulate the vertical spaces for each input..
}
<fieldset id="o-bs-sum-buginfo">
<p>
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
</p>
</fieldset>
Solution 5
There's no need to use JavaScript, jQuery, or additional div
s. You just have to:
- Float both
input
andlabel
to left (note thatinput
has to be block to be floated). - Add
clear: both
tolabel
. - Set fixed width (e.g.
100px
) tolabel
.
input {
display: block;
float: left;
}
label {
float: left;
clear: both;
width: 100px;
}
<fieldset id="o-bs-sum-buginfo">
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
<label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
<input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
</fieldset>
hashg
Updated on July 09, 2022Comments
-
hashg almost 2 years
HTML Code Snippet:
<fieldset id="o-bs-sum-buginfo"> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> .... </fieldset>
Using only CSS (or jquery), irrespective of the browser size, I want to pair label and input elements next to each other. I also do have freedom to change tweak the HTML. if required.
-
hashg over 13 yearsWorks perfect. I would have faced issues without the div container wrapping around label and input.
-
devasia2112 almost 12 years+1 Good Answer, only this Code Snippet -> display:inline-block;width:50%; is enough!
-
Merlyn Morgan-Graham over 11 years
p
is non-semantic here. It is not a series of paragraphs.div
would be a better choice. see accepted answer.