Css 如何在Grails中将字段标签放置在字段顶部而不是左侧
我正在使用Grails2.4.2。我想使用Grails默认CSS,并做一些修改。现在我需要将字段标签放在字段顶部而不是左侧。有人能帮我吗?我在CSS方面很弱。提前谢谢 下面是我的表单元素,我想在其中显示一行中的4个字段:Css 如何在Grails中将字段标签放置在字段顶部而不是左侧,css,grails,grails-2.4,Css,Grails,Grails 2.4,我正在使用Grails2.4.2。我想使用Grails默认CSS,并做一些修改。现在我需要将字段标签放在字段顶部而不是左侧。有人能帮我吗?我在CSS方面很弱。提前谢谢 下面是我的表单元素,我想在其中显示一行中的4个字段: <div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required"> <label for="fullName">
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
*
*
上述代码的输出如下:
现在我想在一行中添加4个字段,并且所有字段的标签将位于顶部。你能帮忙吗
每行中的单个字段::
表单元素::
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'username', 'error')} required">
<label for="username">
<g:message code="users.username.label" default="Username"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="username" required="" value="${usersInstance?.username}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'password', 'error')} required">
<label for="password">
<g:message code="users.password.label" default="Password"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="password" required="" value="${usersInstance?.password}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'email', 'error')} required">
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'phone', 'error')} required">
<label for="phone">
<g:message code="users.phone.label" default="Phone"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="phone" required="" value="${usersInstance?.phone}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fax', 'error')} required">
<label for="fax">
<g:message code="users.fax.label" default="Fax"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fax" required="" value="${usersInstance?.fax}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'address', 'error')} required">
<label for="address">
<g:message code="users.address.label" default="Address"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="address" required="" value="${usersInstance?.address}"/>
</div>
*
*
*
*
*
*
*
。。。
#fieldlabel{display:block;}
#fieldinput{显示:块;}
...
...
给你。只需定义以下CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fieldcontain label, .fieldcontain .property-label {
display: block;
text-align: left;
width: 100%
}
.fieldcontain input {
width: 100%;
}
.fieldcontain {
width: 25%;
display: inline-block;
float: left
}
.row:before, .row:after {
display: table;
content: " ";
}
您的HTML应该如下所示:
<fieldset class="form">
<div class="row">
<div class="fieldcontain required">
<label for="firstName">
First Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="firstName" required="" value="" id="firstName">
</div>
<div class="fieldcontain required">
<label for="lastName">
Last Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="lastName" required="" value="" id="lastName">
</div>
<div class="fieldcontain required">
<label for="email">
Email
<span class="required-indicator">*</span>
</label>
<input type="text" name="email" required="" value="" id="email">
</div>
<div class="fieldcontain required">
<label for="number">
Number
<span class="required-indicator">*</span>
</label>
<input type="text" name="number" required="" value="" id="number">
</div>
</div>
</fieldset>
名字
*
姓
*
电子邮件
*
数
*
换行,您的一组4个元素,即.fieldcontain
在一个div
中,使用class.row
,如我在示例中所示
尽管Grails提供了基本的CSS样式,因此新项目可以快速启动,但我建议您使用。请添加一些代码和您想要实现的输出。@ShashankAgrawal我已经编辑了这个问题。这里有2个字段,但我希望一行有4个,并且标签在字段顶部。你能帮忙吗?谢谢你的回复。但当我添加另一张图片时,每一行都是一个字段。当然,我更新了答案。请检查一下。正如我在回答中提到的,Grails的CSS非常基本。你肯定会开始面临CSS的问题,所以我再次建议你使用一些CSS库,比如Bootstrap.:-)它现在在一行中显示3个项目。我接受这个答案。但我需要4个人。当然,谢谢。你能不能再贴一次你的新照片code@SumonBappi我已经更新了CSS和HTML标记。请看一看。这会奏效的。
<fieldset class="form">
<div class="row">
<div class="fieldcontain required">
<label for="firstName">
First Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="firstName" required="" value="" id="firstName">
</div>
<div class="fieldcontain required">
<label for="lastName">
Last Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="lastName" required="" value="" id="lastName">
</div>
<div class="fieldcontain required">
<label for="email">
Email
<span class="required-indicator">*</span>
</label>
<input type="text" name="email" required="" value="" id="email">
</div>
<div class="fieldcontain required">
<label for="number">
Number
<span class="required-indicator">*</span>
</label>
<input type="text" name="number" required="" value="" id="number">
</div>
</div>
</fieldset>