css - Play 表单助手不显示内联

Question

我是 play 框架的新手，我想在我的页面顶部添加一个表单，其中包含一个简单的用户名和密码字段以及一个提交按钮。我正在使用 play form helper，但它不允许我并排放置这些字段，而是总是将它们放在一起。我一直在尝试更改 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 放在几乎所有地方，但它没有任何效果。有人对如何并排放置表单元素有任何想法吗？

Answer 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>

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

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

希望这对你 friend 有用.. :)