How to keep check boxes vertically aligned?
Question
Right now I have a list of checkboxes inside a panel using:
<div style="float:right; position:relative; ">
<Label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</Label>
</div>
<div style="float:right; position:relative; ">
<Label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem => item.b2)</Label>
</div>
<div style="float:right; position:relative; ">
<Label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem => item.b3)</Label>
</div>
However, sometimes the checkboxes don't stay in their each individual lines and instead they jump onto the same line as another checkbox. Eg I want it to be formatted into
Box1
Box2
Box3
But occasionally it becomes:
Box1 Box2
Box3
How can I fix this??
3 answers
solution1
0 2017-02-16 20:34:50
Depending on what you are trying to do here is couple for solutions i have in mind
<body><div style="float:right;/* position:relative; */">
<label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</label>
</div>
<br>
<div style="float:right;/* position:relative; */">
<label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem => item.b2)</label>
</div>
<br>
<div style="float:right;/* position:relative; */">
<label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem => item.b3)</label>
</div>
</body>
Solution 2:
<body><div style="/* float:right; */position: relative;">
<label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</label>
</div>
<div style="/* float:right; */position: relative;">
<label><span style="font-weight:normal; font-size:16px;">Box2</span> @Html.CheckBoxFor(modelItem => item.b2)</label>
</div>
<div style="/* float:right; */position: absolute;">
<label><span style="font-weight:normal; font-size:16px;">Box3</span> @Html.CheckBoxFor(modelItem => item.b3)</label>
</div>
</body>
solution2
0 2017-02-16 20:41:01
I would recommend that you place all of your box's in a list as shown below to maintain an aligned vertical order i have also cleaned up your code a little bit to make it more readable
<ul style="float:right; position:relative; ">
<li>
<Label>
<span style="font-weight:normal; font-size:16px;">Box1</span>@Html.CheckBoxFor(modelItem => item.b1)
</Label>
</li>
</ul>
<ul style="float:right; position:relative; ">
<li>
<Label>
<span style="font-weight:normal; font-size:16px;">Box2</span>@Html.CheckBoxFor(modelItem => item.b2)
</Label>
</li>
</ul>
<ul style="float:right; position:relative; ">
<li>
<Label>
<span style="font-weight:normal; font-size:16px;">Box3</span>@Html.CheckBoxFor(modelItem => item.b3)
</Label>
</li>
</ul>
a demo can be found: HERE
You can read more about html list's HERE
solution3
0 2017-02-16 21:25:30
You need to clear your floats
Apply this style to the parent element:
.group:after {
content: "";
display: table;
clear: both;
}
In your case:
<span class="group">
<div style="float:right; position:relative; ">
<Label><span style="font-weight:normal; font-size:16px;">Box1</span> @Html.CheckBoxFor(modelItem => item.b1)</Label>
</div>
<span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.