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
}
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;
}
I have a layout where there is a button either side of the screeen.
The content is between the buttons.
How can I make the content display between the buttons when the view is large enough, but drop down and fill remaining space when the content starts to overlap the space between the buttons.
The buttons are a fixed size
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav ul li:first-child,
nav ul li:last-child {
display: table-cell;
}
<nav role="navigation">
<ul>
<li>
<input type="submit" value="Back">
</li>
<li>
<button>next</button>
</li>
</ul>
</nav>
<div id="content">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<p>"#content" should extract itself from between buttons to next 'line' when page gets smaller, then when that is too small as well, it can start blocking up the inputs.</p>
Fiddle here: https://jsfiddle.net/8g25hjw5/
By doing something like this:
<nav role="navigation">
<ul>
<li>
<input type="submit" value="Back">
</li>
<li>
<button>next</button>
</li>
</ul>
</nav>
<div id="content">
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
ul {
list-style: none;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
#content {
display: table;
}
#content div {
display: table-row;
}
#content input {
display: table-cell;
}
#media screen and (max-width: 700px) {
#content {
clear: both;
}
}
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%;
}
I'm trying to make my first menu by hovering over links but when I hover, the ul within the first ul isn't showing.
JSfiddle: http://jsfiddle.net/2FLMD/
So basically I have a nav with a ul and links within that. Then I have another ul within the first link called Log In. Inside that second ul are two links with one input elements inside each.
HTML
<nav>
<ul>
<li>LOG IN</li>
<ul>
<li>Username: <input type="text" name="username"> </li>
<li>Password: <input type="password" name="password"></li>
</ul>
<li>SIGN UP</li>
<li>CUSTOMER SERVICE</li>
<li>SPECIALS</li>
<input type="search" name="search">
</ul>
</nav>
CSS
nav ul{
background:#1C1D21;
margin:0;
padding:0;
}
nav ul li{
display:inline-block;
color:white;
padding:10px 20px;
border-right:1px solid white;
}
nav ul li a{
color:white;
text-decoration:none;
}
nav ul ul {
position:absolute;
border-top:1px solid red;
}
/*Where the problem seems to occur */
nav ul ul li {
display:block; /*change to display to none */
}
/*The hovering part */
nav ul li:hover > ul li{
display:block;
}
The problem is in the html structure as your sub ul is not containing in the li and is existing as a sibling to the li elements:
<li>LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Example
You want to put the sub list (sub nav) inside your main list (main nav)
http://jsfiddle.net/doiks14/2FLMD/4/
The selector you have nav ul li:hover > ul li indicates that nav ul li has child of ul li
I simply changed the mark up to reflect what you're trying to do.
<li>
LOG IN
<ul>
<li>Username: <input type="text" name="username"></li>
<li>Password: <input type="password" name="password"></li>
</ul>
</li>
Also note that this is the semantically correct way of creating a list.
Change > to + like this:
nav ul li:hover + ul li{
display:block;
}
Demo.
Note that the ul (you want to show) is not a direct child of the li which you hover on, it's just an adjacent sibling of that li, so we should use + instead of >.
There are several errors on yout HTML markup. Here is a quick fix
Your selector wasn't formed correctly, try this:
nav ul:hover ul li{
display:block;
}
ref: http://jsfiddle.net/2FLMD/2/
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;
}