玩形式助手不显示内嵌

我是新来玩的框架，并试图添加一个窗体到我的页面顶部用一个简单的用户名和密码字段和提交按钮。我使用的是表格助手，但它不会让我将这些字段并排放置，而是始终将它们放在另一个之上。我一直试图改变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放在任何地方，但它没有效果。有没有人有任何想法如何定位表单元素并排？

来源

2013-05-02 Conor Pender

我想你可以把用户名和密码输入不同的div，这很有用根据你喜欢的每一个位置。 – yco 2013-05-02 11:27:49

如果你检查你可以看到像这样的形式辅助生成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定义CSS，或dt元素使其并排显示。这很简单，但不是最好的样本（我只能告诉你基本）：

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

希望对您的朋友.. :)

来源

2013-05-03 13:33:28

我们可以在Play应用程序中找到生成的HTML源代码？我试过但找不到我的应用程序。 – Ashu 2016-05-10 06:57:19

玩形式助手不显示内嵌

回答

相关问题