玩形式助手不顯示內嵌

我是新來玩的框架，並試圖添加一個窗體到我的頁面頂部用一個簡單的用戶名和密碼字段和提交按鈕。我使用的是表格助手，但它不會讓我將這些字段並排放置，而是始終將它們放在另一個之上。我一直試圖改變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

玩形式助手不顯示內嵌

回答

相關問題