0

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

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

我希望列表项显示为

用户名密码：

[文本字段] [文本字段]

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

4

3 回答 3

0

我建议您将表单子项放在跨度标记
工作小提琴中

HTML

<div id="login">
  <form>
    <span>Username:<input type="text" name="username" /></span>&nbsp
    <span>Password:<input type="text" name="password" /></span>  
  </form>
</div>

参考： < span>标签用于对文档中的内联元素进行分组。

CSS（在小提琴中参考完整的 CSS）

span{
  margin-right:10px;
  display:inline-block;
  width:220px;
  color: #fff;
}

希望它可以帮助

于 2013-10-30T18:02:35.080 回答
0

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

我加了一个<br>带类的clear。然后我给了这个类的属性clear:both;。这会将浮动推到新行上。如果要将它们排列起来，请为元素添加宽度。如果要将它们向上移动到页面上，请在父元素中添加一个 margin-top。

    <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; }
于 2013-10-30T17:39:50.797 回答
0

我认为你应该改变你的html.

您不需要将此表单信息放在ul. 事实上，这在语义上是不正确的。

这是我的建议：

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

div另外，为了尽可能地把它放在彩色里面，我用margin-top在了#login

#login {   
    margin: 0;
    padding: 0;
    width: 500px;
    float: right;
    **margin-top:-30px;**
}

演示

http://jsfiddle.net/EPp5C/9/

于 2013-10-30T17:47:56.627 回答