1

我正在尝试实现一个简单的登录页面，我需要对齐一些输入文本：

这是我的CSS：

    body {
        background-image: url(image/bg.jpg); background-size: 100%;
    }

    .content{
        border: 1px solid gray;
        margin-top:180px;
        margin-left:380px;
        background-color: #464749;
        width:333px;
        height: 352px;
        padding: 58px 76px 0 76px;
        color: #ebebeb;
        font: 12px Arial, Helvetica, sans-serif;
    }
    span{
        display:block;  
        margin-left: 30px;
    }
    input{
        width: 205px;
        padding: 10px 4px 6px 3px;
        border: 1px solid #0d2c52;
        background-color:#1e4f8a;
        font-size: 16px;
    }
    .nameField{

        display:inline;
        width:80px;
        text-align: right;
        padding: 14px 10px 0 0;
        margin:0 0 7px 0;
    }
    .inputField{
        display:inline;
        width:230px;
        margin:0;
        margin:0 0 7px 0;
    }

这是我的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="main.css" />
        <!-- Date: 2012-05-30 -->
    </head>
    <body>
        <div class="content">
            <h2>Login</h2>
            <span>
                <div class="nameField">
                Username: 
                </div>
                <div class="inputField">
                    <input type="text" name="username" size="30" maxlength="2048"/>
                </div>
            </span>
            <span><div class="nameField">
                Password: 
                </div>
                <div class="inputField"><input type="password" name="password" size="30" maxlength="2048"/>
                    </div>
            </span>
        </div>
    </body>
</html>

我的输出是：

在此处输入图像描述

我怎样才能对齐那个蓝色的输入文本？有人能帮我吗？？谢谢sss

4

2 回答 2

4

删除 inputField 类的宽度，并将 nameField 和 inputField 类的显示从 inline 更改为 inline-block。

jsFiddle 示例。

CSS：

.nameField{
    display:inline-block;
    width:80px;
    text-align: right;
    padding: 14px 10px 0 0;
    margin:0 0 7px 0;
}
.inputField{
    display:inline-block;
    width:130px;
    margin:0;
    margin:0 0 7px 0;
}​
于 2012-05-30T19:16:08.920 回答
1

display将属性更改.nameField为inline-block。

此外，您不需要对所有内容都使用 div。有一个非常好的标签label用于标记表单字段。

于 2012-05-30T19:15:33.613 回答