Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.
Related
I got a html with a lot of label + input
<label>Application</label>
<input id="ApplicationName" />
...
<label>Foo</label>
<input id="Foo" />
...
<label>Junk</label>
<input id="Junk" />
I force a width to add some consistency
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
With this style it's a bit better but the flow still breaks "anywhere" depending on the width of container. How can I make the label + input to be a block ?
(Without enclosing both of them in a container)
Another acceptable solution would be to
add a virtual carriage return after each input or
before each label.
I didn't succeed to put it after because the input tag doesn't support after.
Neither can I put it before because
label::before {
content: "\A";
white-space: pre;
}
doesn't mix well with label{display:inline-block}
label {
display:inline-block;
width:10em;
}
input {
width:10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
resize the window to exhibit unwanted behaviour
You can use a mixture of floating and clearing, a bit old school but seems to work for the structure:
label {
display: block;
width: 10em;
float: left; /* makes the element act like inline block */
clear: left; /* clears any left floats so before so this should start on new line */
}
input {
width: 10em;
float: left;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Or you could just give a width to your parent container to force the content onto the next line:
div {
width: 21em;
}
label {
display: inline-block;
width: 10em;
}
input {
width: 10em;
}
<div>
<label>namespace</label>
<input id="namespace" />
<label>Application</label>
<input id="application" />
<label>Description</label>
<input id="Description" />
<label>Author</label>
<input id="Author" />
</div>
Option #1, CSS-only
If you really can't edit the HTML, then you can apply white-space: pre; and content: "\a"; to the label:before. See this updated JSFiddle.
label:before {
content: "\a";
white-space: pre;
}
<label>Application</label>
<input id="ApplicationName" />
<label>Foo</label>
<input id="Foo" />
<label>Junk</label>
<input id="Junk" />
Option #2, HTML-only
A better solution could be to just wrap the <input>s in the <label>s (another benefit of this, is that you don't need to use the for attribute to link each label the the corresponding input!). Here's a working JSFiddle with your code snippet :)
input{
width: 10em;
}
label{
float: left;
clear: left;
}
<label>Application: <input id="ApplicationName" /></label>
<label>Foo: <input id="Foo" /></label>
<label>Junk: <input id="Junk" /></label>
I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo
I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<input name="declared_first" value="above" />
<br/> <!-- I want to get rid of this -->
<input name="declared_second" value="below" />
</form>
</body>
</html>
I just want the first input to appear above the second input, both on the right hand side.
You can use floating to the right and clear them.
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.
form {
direction: rtl;
}
input {
display: block;
direction: ltr;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Or the modern way, flexbox layout
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Try use this:
<html>
<body>
<input type="text" style="direction: rtl;" value="1">
<input type="text" style="direction: rtl;" value="10">
<input type="text" style="direction: rtl;" value="100">
</body>
</html>
input { float: right; clear: both; }
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<p>
<input name="declared_first" value="above" />
</p>
<p>
<input name="declared_second" value="below" />
</p>
</form>
</body>
</html>
To affect ONLY text type input boxes use the attribute selector
input[type="text"]
This way it will not affect other inputs and just text inputs.
https://www.w3schools.com/css/css_attribute_selectors.asp
example, use a div and give it an idea to refer to:
#divEntry input[type="text"] {
text-align: right;}
Use some tag, to aligning the input element.
So
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
{
width: 500px;
height: 250px;
display: table;
text-align: right;
}
I answered this question in a blog post: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/
It refers to this fiddle: https://jsfiddle.net/wscherphof/9sfcw4ht/9/
Spoiler: float: right; is the right direction, but it takes just a little more attention to get neat results.
Try use this:
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.
What would be a proper css method to make the following so it is the same with the exception that the text input fields vertically line up along their left side?
So the check boxes will still be right up against the input fields and in between the label and input fields, but the input fields still all light up.
Current HTML:
<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>
Current CSS:
label {
font-size: 90%;
float:left;
width: 15em;
}
Why not just use a negative margin?
.checkbox {margin-left: -16px;}
Depending on the rest of your setup might require a bit of tweaking for cross-browser pixel-perfectness.
I would personally probably also just float both the labels and the inputs and get rid of the <p>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display: block;
font-size: 90%;
width: 15em;
clear:left;
}
label, input {
float:left;
}
input[type=checkbox]
/* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
{
margin-left: -2em;
}
</style>
</head>
<body>
<form>
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
<label for="search_server">Server:</label>
<input type="checkbox" name="server_like" />
<input id="search_server" type="text" name="Server" />
<label for="search_host">Host:</label>
<input id="search_host" type="text" name="Host" />
</form>
</body>
</html>
Do this.
HTML Markup:
<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>
Css Markup:
fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}
Then add a width to your form, depending on the input sizes, with your checkbox, just float it in between and use margins.
I would do something like this;
<div class="label">Uri:</div><div class="field"><input type="text" /></div>
Then give the div with the class 'label' an default width and float them next to eachother.
EDIT: Saw you changed your post;
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
Your css could be something like
label
{
width: 150px;
float:left;
clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
float:left;
}
If your form is small, you can just use a <table>.