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;
}
Related
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%;
}
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'd like to implement bar where main menu is on the left and searchbox is on the right. My codes are:
<div id="divMenu">
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Events/Services</span>
<ul>
<li><span>submenu1</span></li>
<li><span>submenu2</span></li>
<li><span>submenu3</span></li>
</ul>
</li>
<li><span>Ventures</span></li>
<li><span>Testimonials</span></li>
<li><span>Resources</span></li>
<li><span>e-Commerce</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
<div id="search">
<!--<form id="fmSearch" name="fmSearch" method="post" action="">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="iSearch" type="text" id="iSearch" value="Search..." size="20" maxlength="100" /></td>
<td><input id="bSearch" name="bSearch" type="image" src="images/search.gif" class="button" /></td>
</tr>
</table>
</form>-->
<form id="fmSearch" name="fmSearch" method="post" action="">
<label><span>
<input id="iSearch" name="iSearch" type="text" class="keywords" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
</div>
CSS style are:
#divMenu { width:100%; height:30px; background-image:url(../images/bar_menu.jpg); background-repeat:repeat-x; margin:0; padding:0; border-top:1px solid #999;}
#menu { width:75%; margin:0; padding:0; height:30px; position:absolute;}
#menu ul {float:left; margin:0; padding:0; list-style:none; font-size:0.8em;}
#menu ul li {float:left; margin:0; padding:0;}
#menu ul li a {line-height:25px; display: block; color:#fff; padding:2px 10px; text-decoration:none; z-index:500;}
#menu a:hover, #menu ul li a.active {margin:0; /*background-image: url(../images/img_nav.jpg);*/ background-color:#1D1D1D; background-repeat:repeat-x; z-index:510; color:#999;}
#menu ul li ul {display:none; position:absolute; background-color:#333; z-index:520; font-size:1em;}
#menu ul li:hover ul {display:block; z-index:530;}
#search { width:25%; padding:0; margin:0; float:right; height:30px; z-index:999;}
#search form #iSearch { height:16px; z-index:1000;}
PROBLEM: My searchbox is not working. It is displayed on page but cannot click on it and type in it as if it's being hidden under something.
Any suggestions?
It's working fine here
http://jsfiddle.net/XFse7/
Must be some CSS before that causing the problem. I think it's under your menu if it's not working on your side. And note that z-index only works with positioned tag
position: absolute, relative, fixed, etc...