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源代码，您可以注意到form-helper生成这样的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;
}

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

播放表单助手不显示内联

1 个答案: