html - 使用 Play 表单助手对某些字段进行并排布局

Question

我是 Play 框架的新手并使用 play 2.5.2。在某些页面中，我需要一个接一个地显示几个字段。

例如：

产品名称

[产品名称文本框]

产品分类

[产品类别的文本框]

价格范围：从【输入框】到【输入框】

城市

[城市文本框]

生产日期：从【输入框】到【输入框】

如何实现这种布局（仅以不同方式显示价格范围和生产日期）？

我正在使用 views.html.helper ( @import helper._) 而不是 twitter 引导程序。这就是我使用它的方式：

@inputText(
  extractSearchForm("productName"),
  '_label -> "Product name",
  'placeholder -> "Product name for ex: Jess Toer"
)

Answer 1

我相信有很多方法可以做到这一点。

这是使用 id 字段自定义 css 的示例。（我不擅长 CSS，希望有些显示更好的 CSS 代码。）

<style>
.my_form {
  text-align:left;
}

#from dt {
  float:left;
}
#from dd {
  float:left;
}

#to {
  float:left;
}
#to dt {
  float:left;
}
#to dd {
  float:left;
}

#city
{
  clear:left;
}
</style>

<div class="my_form">
@inputText(formData("username"), '_id -> "name", '_label -> "Product name", 'placeholder->"Product name", '_help -> "")
@inputText(formData("username"), '_id -> "category", '_label -> "Product category", 'placeholder->"Product category", '_help -> "")
@inputText(formData("username"), '_id -> "from", '_label -> "Price range: from", 'placeholder->"from", '_help -> "")
@inputText(formData("username"), '_id -> "to", '_label -> "to", 'placeholder->"to", '_help -> "")
@inputText(formData("username"), '_id -> "city", '_label -> "City", 'placeholder->"City", '_help -> "")
</div>

然后你可以看到如下输出。

如果您构建自己的表单构造函数，那会更好。