CSS元素布局问题

Question

我是 CSS 布局的新手，遇到了一个问题。这就是我目前拥有的。 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;
} 

这个问题有两个部分。第一部分:

我希望列表项显示为

Username: Password:

[textfield] [texfield]

相应的用户名和密码下的文本字段也是如此。

Answer 1

http://jsfiddle.net/EPp5C/6/

我添加了一个 <br>带一类清。然后我给这个类赋予了 clear:both; 的属性。 .这会将花车推到新的一行。如果要将它们排成一行，请为元素添加宽度。如果您想将它们进一步移至页面上方，请向父元素添加边距顶部。

    <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; }