0

我是 play 框架的新手，正在尝试在页面顶部添加一个表单，其中包含一个简单的用户名和密码字段以及一个提交按钮。我正在使用播放表单助手，但它不允许我将这些字段并排放置，而是总是将它们放在一起。我一直在尝试更改 CSS，但没有运气。

这是 HTML 的相关部分

    <header id="top_header" class=rounded>
        <div id="logo">
            <h1>@message</h1>
        </div>
        <div id="login_pane">
            <div id="login">
            @helper.form(action=routes.Test.testFunction(), 'id->"login_form"){
                @helper.inputText(loginForm("username"), 'id->"username", '_label->"Username")
                @helper.inputPassword(loginForm("password"), 'id->"password", '_label->"Password")
                <input type="submit" value = "Enter" id="login_button">
            }
            </div>
        </div>
    </header>

和 CSS

#top_header{
    background: yellow;
    height: 30px;
}

#logo{
    float: left;
    background: green;
    width: 200px;
}

#login_pane{
    float: right;
    background: blue;
    width: 500px;
}

#login{
    float: left;
    background: red;
}

#username, #password, #login_button{
    display: inline;
}

顺便说一句，我只是使用丑陋的背景颜色来查看事物的位置。我试过display: inline到处放，但没有效果。有人对如何并排放置表单元素有任何想法吗？

4

1 回答 1

1

如果您检查 HTML 源代码，您会注意到生成 HTML 的表单助手是这样的（可能相似但不完全相同）：

<form action="/test/testFunction" method="GET" id="login_form">
    <dl class=" " id="username_field">
        <dt><label for="username">Username</label></dt>
        <dd>
            <input type="text" id="username" name="username" value="" >
        </dd>
    </dl>
    <dl class=" " id="password_field">
        <dt><label for="password">Password</label></dt>
        <dd>
            <input type="password" id="password" name="password" >
        </dd>
    </dl>
    <input type="submit" value = "Enter" id="login_button">
</form>

因此，您可以根据 、 或 元素定义您的 cssdl以dd使其dt并排显示。这是简单但不是最好的示例（我只告诉你基本的）：

#login_form dl {
   padding: 10px;
   float: left;
}
#login_form dd {
   margin-left: 0px;
}

希望这对你的朋友有用.. :)

于 2013-05-03T13:33:28.147 回答