I'm trying to align a section of text boxes but allowing labels in between them. Unfortunately they are being pushed aside. I'm sure it might be a css field type I'm unaware of that will handle this but maybe someone could help.
<div id="boxalign2">
<p>
<label>Contact Info</label><br>
<label>Email:</label> <input type="text"/>
<label>Office #:</label> <input type="text"/>
<label>Other:</label> <input type="text"/>
<label>Preferred method of contact</label>
<select id = "myList">
<option value = "1">Email</option>
<option value = "2">Phone</option>
</select>
</p>
css
#boxalign2 p label{
display: inline-block;
float: left;
clear: left;
width: 100px;
text-align: right;
}
If the above doesn't show my problem, here is the whole:http://jsfiddle.net/HLLVt/
Hi you don't need the float property in your #boxalign2 p label, also you need to manage the width of the labels and the container depends of what you want.
Chek this fiddle http://jsfiddle.net/HLLVt/4/
Remove the float and clear styles and the <p> tags around each label/input pair and they will all line up on one line. See http://jsfiddle.net/HLLVt/7/
Related
span{
text-align: justify;
}
<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>
I want to align the label for excessive reinforcement checkbox like image2
For example
Thanks in advance
First of all use <label> instead of <span>.
If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.
label{
text-align: justify;
float: left;
line-height: 20px;
}
input{
float:left;
}
<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>
Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.
If you can change the HTML
The best and new method to use checkbox is
<label><input type="checkbox" name="type">Excessive Reinforcement</label>
span {
text-align: justify;
}
.make-table {
display: table-cell;
/* make it behave like table-cell. so that they fall beside each other. */
}
<div class="any-class">
<label><span class="make-table"><input type="checkbox" name="type"></span>
<span class="make-table">Excessive<br> Reinforcement</span>
</label>
</div>
<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
<br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>
Make this simple change!
This is one way of doing it:
<label for="type-1">
<input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>
When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.
Is there a solution to move each form element on a new line without closing these elements on divs?
I mean:
<label for="one">One:</label> <input type="text" id="one">
<label for="two">Two:</label> <select id="two">
<option value="a">a</option>
<option value="b">b</option>
</select>
...
To display:
One: [.......]
Two: [a \/]
and so on...
If I put on CSS:
input, select, label {
display:block;
}
then labels are not on the same line as the form fields.
Is the only solution:
<div><label for="one">One:</label> <input type="text" id="one"></div>
...
Another way to do it is like this
<label><span>One:</span><input type="text" id="one"></label>
and the css
label {
display:block;
position:relative;
padding-left:120px; /* adjust if necessary */
}
label > span {
position:absolute;
left:0;
}
Why would you use display:block; if you want your elements to behave inline? Taken directly from w3schools.com, "block: displays an element as a block element like <p>".
We all know that when you use <p> the next element is automatically placed on a new line. So if you want your <label> and <input> elements to be side by side, you must use display:inline or inline-block.
Just do
<label for="one">One:</label> <input type="text" id="one"> <br>
Thats it. enjoy
Edit: expanding on what Hardy said, wrapping them in a div or span will give you more
flixibility later down the line but if your only concern is to get it all in one line, just put it like i wrote above.
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}