CSS element layout problems - css

Question

I'm new to CSS layouts and have hit a problem.
This is what I currently have. http://jsfiddle.net/EPp5C/5/
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
}
#login ul {
margin: 0;
padding: 0;
}
#login ul li {
margin: 0;
padding: 0;
display: inline-block;
font-size:14px;
color: white;
}
There are 2 parts to this question.
First part:
I would like the list items to be displayed as
Username: Password:
[textfield] [texfield]
so have the textfields under the corissponding username and password.

Answer 1

http://jsfiddle.net/EPp5C/6/
I added a <br> with a class of clear. I then gave this class the attributes of clear:both;. This will push the floats onto a new line. If you want to line them up, add a width to the elements. If you want to move them further up the page, add a margin-top to the parent elements.
<ul>
<li>Username: </li>
<li>Password: </li>
<br class="clear" />
<li><input type="text" name="username" /></li>
<li><input type="text" name="password" /></li>
</ul>
.clear { clear:both; }

Answer 2

I think you should change your html.
You do not need to put this form info in a ul. In fact, that would be semantically incorrect.
Here is what I suggest:
HTML
<div id="login">
<form>
<label>Username:</label><label>Password:</label>
<br />
<input type="text" name="username" />
<input type="text" name="password" />
</form>
</div>
CSS
label{
display:inline-block;
width:170px;
color: #fff;
}
Also, to put it inside the colored div as much as possible, I used margin-top on the #login
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
**margin-top:-30px;**
}
Demo
http://jsfiddle.net/EPp5C/9/

Answer 3

i suggest you to put the form child inside span tag
working fiddle
HTML
<div id="login">
<form>
<span>Username:<input type="text" name="username" /></span>&nbsp
<span>Password:<input type="text" name="password" /></span>
</form>
</div>
reference:The <span> tag is used to group inline-elements in a document.
CSS (refer complete CSS at the fiddle)
span{
margin-right:10px;
display:inline-block;
width:220px;
color: #fff;
}
hope it can help