My sitsuation is like this: http://jsfiddle.net/9fxvf5w2/10/ I need to get the input elements inside the fieldset elements to align with each other.
They align inside fieldset elements nicely, but I need them to align also with input elements inside the other fieldset.
html:
<ol>
<fieldset >
<legend>
kljjlkjlk
</legend>
<li><label>wertwsssssssssssssssertwert</label>
<input />
</li>
<li><label>asdasdasdas</label><input />
</li>
<li><label>xcvxcvxcvxc</label> <input />
</li>
</fieldset>
<fieldset >
<legend>
vxvcvcxv
</legend>
<li><label>wertwertwert</label>
<input />
</li>
<li><label>asdasdasdas</label><input />
</li>
<li><label>xcvxcvxcvxc</label> <input />
</li>
</fieldset>
</ol>
CSS:
li{
list-style-type:none;
}
ol{
display: table;
}
ol li{
display: table-row;
}
ol li label,
ol li input{
display: table-cell;
}
yes, aligning 2 elements with same size is possible with css.
ol{
list-style:none;
display:block;
width:400px;
}
ol li{
display:block;
width:100%;
}
ol li label,
ol li input{
display: block;
height:40px;
float:left;
width:45%;
}
Related
I have this section of html:
<ul id="checkout">
<li>
<p>$1.99 Basket</p>
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
And it displays like so:
For some reason the "$1.99 Basket" is not inline with the quantity form.
My CSS for the section is like so:
#checkout {
display: inline;
}
I simply want the Price and Quantity field on the same level.
Try the below code to pull elements left or right.
#checkout li:nth-child(1) {
display:inline-block;
float:left;
}
#checkout li:nth-child(2) {
display:inline-block;
float:right;
}
After this code don't forget the clear with below code.
#checkout {
clear: both;
}
jsfiddle
Get rid of your <p> tags and add your lis to your css
<style>
#checkout li {
display: inline;
}
#checkout form {
display: inline;
}
</style>
<ul id="checkout">
<li>
$1.99 Basket
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
Assuming you want them horizontally aligned:
You are setting the <ul> to display: inline;, but you need to set your <li> elements to display: inline-block; so that they will appear on the same line. Just targeting the <ul> will not affect the children.
(The <li> element's default display property value is list-item.)
#checkout li {
display: inline-block;
}
Hi I try to float my li but not my ul
<form name="contactform" action="send_email.php" method="post">
<ul>
<li><p>Email : </p> </li>
<li><input type="text" class="entry" name="email" size="30" id="input_email"> </li>
<li><span id=icon_email></span></li>
</ul>
<ul>
<li><p>Nom/Prénom/Pseudo : </p></li>
<li><input type="text" class="entry" name="name" size="30" id="input_name"></li>
<li><span id=icon_name></span></li>
</ul>
<ul>
<li><p>Message : </p></li>
<li><textarea rows="6" cols="50" class="textarea" name="body" id="input_body"></textarea> </li>
<li><span id=icon_body></span></li>
</ul>
<input type="submit" value="Envoyer un email" class="button pure_bleu" id="button_send_email">
</form>
so in my css I have :
form ul li {
float: left;
}
So, the result is like :
SO I would like that block : li are float but not ul
Thanks
But semantically you are using the wrong html elements
ul is an Unordered List, replace it with a div
p is a paragraph replace it with a span
li is an item list
Structuring your html correctly will make things easier for you. Look at how easy it is to understand a well structured html
http://fiddle.jshell.net/4TzZv/16/
Leo
Maybe like this?
http://jsfiddle.net/JVNPN/3/
form ul li {
float: left;
line-height: 24px;
list-style: none;
}
form ul {
clear: both;
}
You can do it in this way also
http://jsfiddle.net/anjum121/JVNPN/1/
form ul li {
display:inline-block;
line-height: 24px;
vertical-align: middle;
list-style: none;}
form ul{
display:block
}
The problem is that the ul.horizontal doesn't work as it should. There is a big gap beneath it and the text-inputs can't retain their 100% width property.
How can I fix this?
<ul class="form">
<li>
<label>Firstname</label> <span>
<input name="title" type="text" placeholder="What is your">
</li>
<li>
<ul class="horizontal">
<li>
<label>Beskrvning</label>
<input name="title" type="text" placeholder="Why does CSS work with fake tags?">
</li>
<li>
<label>Beskrvning</label>
<input name="title" type="text" placeholder="Why does CSS work with fake tags?">
</li>
<li>
<label>Firstname</label>
<input name="title" type="text" placeholder="Why does CSS work with fake tags?">
</li>
</ul>
</li>
css
ul.form {
list-style:none;
padding:0;
margin:20px;
border:1px solid #ccc;
border-radius:5px;
}
li {
border-bottom:1px solid #ccc;
}
li:last-child {
border:0;
}
label {
font-size:12px;
color:#ccc;
padding:5px 10px;
position:absolute;
}
input {
width:100%;
padding:25px 10px 10px 10px;
border:none;
float:left;
background:none;
}
li:before, li:after {
content:"";
display:table;
}
li:after {
clear:both;
}
ul.horizontal {
border:none;
border-radius:0;
margin:0;
text-align: justify
}
ul.horizontal::after {
width: 100%;
display: inline-block;
content:".";
visibility: hidden
}
ul.horizontal li {
display: inline-block;
border:none;
padding-left:40px;
border-left:1px solid #ccc;
}
ul.horizontal li:first-child {
border-left:none;
padding-left:0;
}
The large gap is coming from your ul.horizontal::after (which incidentally I think should only have one colon, yes?), because you have a period in there with display block and a hidden visibility. Comment out the visibility and you can see the period. Simply changing the visibility to hidden does not free up the space it was in on the DOM. You could consider making it a height of 1px if you absolutely have to have it?
I took that out, and saw how your fields broke in terms of 50/50 layout like you want. It will be a little tricky getting a 2-column and a 3-column tabular layout with CSS with inner elements (the inputs) at 100% without using tables. Since that wasn't really the question I just added a quick class for a three-col horizontal UL so we could get rid of that massive space under your horizontal ULs.
http://jsfiddle.net/TLMWa/
Hope this helps!
I have a a breadcrumb in my subheader however the active breadcrumb appears underneath the list. I would like it so that they are both in the same line.
HTML:
<div id="breadcrumb">
<ul>
<li>Home ></li>
<li class="active">Marketing Items</li> </ul> </div>
CSS:
#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}
#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}
#breadcrumb .active {
color:#B3B3B3;
}
Here is also the jsfiddle: http://jsfiddle.net/4nRPY/
Use float:left or display: inline-block. But, with float left you have to clear the element right after that.
#breadcrumb ul li{
float: left;
}
Use display: inline-block; on your <li> tags
#breadcrumb ul li {
display: inline-block;
}
DEMO: http://jsfiddle.net/4nRPY/2/
You can this way to chive to that
li{float:left;}
Demo http://jsfiddle.net/4nRPY/3/
I prefer a pseudo element:
JSFiddle
HTML
<div id="breadcrumb">
<ul>
<li>Home</li>
<li class="active">Marketing Items</li>
</ul>
</div>
CSS
#breadcrumb ul li:after {
content:">";
padding:0 0.5em;
}
#breadcrumb ul li:last-child:after {
content:"";
padding:0;
}
Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.
display: inline; fails when <form> is present
its not lining up side by side.
ul#custom {
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#custom li{
display: inline;
}
<ul id="custom"><li>
<form name="form1" method="post" action="checklogin.php">
<label for="field_1">Login ID (Your Email)</label>
<input type="text" name="myusername" id="field_1" class="short" />
<label for="field_1">Password</label>
<input type="password" name="mypassword" id="field_1" class="short" />
<input type="submit" class="submit" value="Login" />
</form>
</li> <li> **should appear right beside the login form not under it. **</li></ul>
ul li { display:inline-block; }
Works perfect.
Add:
#custom form { display: inline; }
<form> is a block level element. Also I'd suggest just using:
#custom { ... }
instead of:
ul#custom { ... }
You need to make the form inline.
#custom li form{
display:inline;
}
You could achieve this by giving your ul a fixed width and floating your li
ul#custom {
width:1000px;
padding:0;
margin:0;
list-style-type:none;
}
#custom li{
display: inline; float: left;
}