Доброго времени суток.
Помогите, пожалуйста, разобраться с чекбоксами.
Задача: расположить чекбоксы в два столбца.
Расположить в два столбца кое-как удалось. Но получается слишком большое расстояние между чекбоксом и текстом, правый столбец располагается ниже левого.
Делала так:
| Код |
...
<%
boolean elementLeft = true;
%>
<logic:iterate id="row" name="UserForm" property="roles" indexId="index">
<bean:define id="roleId" name="row" property="id"/>
<%
if (elementLeft) {
elementLeft = false;
%>
<span class="cell-left"><input id="<%= roleId %>" name="row" type="checkbox" value="<%= roleId %>"/><label for="<%= roleId %>"><html:text name="row" property="name"/></label></span>
<%
} else {
elementLeft = true;
%>
<span class="cell-right"><input id="<%= roleId %>" name="row" type="checkbox" value="<%= roleId %>"/><label for="<%= roleId %>"><html:text name="row" property="name"/></label></span>
<br><br>
<%
}
%>
</logic:iterate>
...
|
| Код |
.cell-left {
display: inline-block;
vertical-align: bottom;
position: relative;
padding: 5px 0 15px 0;
background: #fff;
margin-left: 5%;
width: 40%;
white-space: nowrap;
}
.cell-right {
display: inline-block;
vertical-align: bottom;
position: relative;
padding: 5px 0 15px 0;
background: #fff;
margin-left: 55%;
width: 40%;
white-space: nowrap;
}
.cell-left input {
float: left;
position: absolute;
}
.cell-left label {
float: right;
font-size: .9em;
}
.cell-right input {
float: left;
position: absolute;
}
.cell-right label {
float: right;
font-size: .9em;
}
|
|