Reputation: 281
I have the following code.
Unfortunately I can't edit the code because it's automatically created by the system I'm working with. I can only define custom CSS and add HTML code before and after this code snippet.
How can I align the checkboxes horizontally and position the labels above?
<div>
<div title="">
<fieldset>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_0" name="field_332[]" type="checkbox" value="1">
<label for="field_332_0">
1
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_1" name="field_332[]" type="checkbox" value="2">
<label for="field_332_1">
2
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_2" name="field_332[]" type="checkbox" value="3">
<label for="field_332_2">
3
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_3" name="field_332[]" type="checkbox" value="4">
<label for="field_332_3">
4
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_4" name="field_332[]" type="checkbox" value="5">
<label for="field_332_4">
5
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_5" name="field_332[]" type="checkbox" value="6">
<label for="field_332_5">
6
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_6" name="field_332[]" type="checkbox" value="7">
<label for="field_332_6">
7
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_7" name="field_332[]" type="checkbox" value="8">
<label for="field_332_7">
8
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="9">
<label for="field_332_8">
9
</label>
<br>
</fieldset>
</div>
</div>
Upvotes: 2
Views: 3165
Reputation: 14891
The issue is with the br
entering a new line-break.
My solution is to display:none
the br
's to render all the checkboxes inline. This works in Chrome - I'm not too sure of other browsers.
br {
display:none;
}
br {
display:none;
}
fieldset {
padding-top:1.5em;
}
input[type=checkbox]:after {
content: attr(value);
position: absolute;
top: -1.5em;
left: 0;
}
input[type=checkbox] {
position: relative;
}
label {
display:none;
}
<div>
<div title="">
<fieldset>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_0" name="field_332[]" type="checkbox" value="1">
<label for="field_332_0">
1
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_1" name="field_332[]" type="checkbox" value="2">
<label for="field_332_1">
2
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_2" name="field_332[]" type="checkbox" value="3">
<label for="field_332_2">
3
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_3" name="field_332[]" type="checkbox" value="4">
<label for="field_332_3">
4
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_4" name="field_332[]" type="checkbox" value="5">
<label for="field_332_4">
5
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_5" name="field_332[]" type="checkbox" value="6">
<label for="field_332_5">
6
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_6" name="field_332[]" type="checkbox" value="7">
<label for="field_332_6">
7
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_7" name="field_332[]" type="checkbox" value="8">
<label for="field_332_7">
8
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="9">
<label for="field_332_8">
9
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="10">
<label for="field_332_8">
10
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="11">
<label for="field_332_8">
11
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="12">
<label for="field_332_8">
12
</label>
<br>
</fieldset>
</div>
</div>
In response to your update, I have updated my answer.
Originally I was going to position:relative
the labels above the inputs. However, the CSS I used only accounts for single digit labels. Anything longer looked odd.
What I am doing here is adding a pseudo-element to the checkboxes with the value as the content, then positioning those directly above the checkboxes. The double digits still look a little odd compared with the single digits, but they look better than the position:relative
solution I had thought of earlier.
br {
display:none;
}
fieldset {
padding-top:1.5em;
}
input[type=checkbox]:after {
content: attr(value);
position: absolute;
top: -1.5em;
left: 0;
}
input[type=checkbox] {
position: relative;
}
label {
display:none;
}
Upvotes: 5
Reputation: 446
fieldset br{
display:none;
}
label {
display: block;
width: 100%;
float: left;
padding-left: 5px;
}
input {
display: block;
}
Upvotes: 1
Reputation: 35680
You can position the labels above the inputs by giving them each relative positioning, and by adjusting their top
and left
offsets:
label {
position: relative;
top: -1.2em;
left: -1.6em;
}
input {
margin-top: 2em;
position: relative;
width: 2em;
}
br {
display: none;
}
label {
position: relative;
left: -1.6em;
top: -0.3em;
}
input {
position: relative;
top: 0.9em;
width: 2em;
}
br {
display: none;
}
<div>
<div title="">
<fieldset>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_0" name="field_332[]" type="checkbox" value="1">
<label for="field_332_0">
1
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_1" name="field_332[]" type="checkbox" value="2">
<label for="field_332_1">
2
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_2" name="field_332[]" type="checkbox" value="3">
<label for="field_332_2">
3
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_3" name="field_332[]" type="checkbox" value="4">
<label for="field_332_3">
4
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_4" name="field_332[]" type="checkbox" value="5">
<label for="field_332_4">
5
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_5" name="field_332[]" type="checkbox" value="6">
<label for="field_332_5">
6
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_6" name="field_332[]" type="checkbox" value="7">
<label for="field_332_6">
7
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_7" name="field_332[]" type="checkbox" value="8">
<label for="field_332_7">
8
</label>
<br>
<input name="field_332[]" type="hidden" value="">
<input id="field_332_8" name="field_332[]" type="checkbox" value="9">
<label for="field_332_8">
9
</label>
<br>
</fieldset>
</div>
</div>
Upvotes: 0
Reputation: 15847
remove all the <br>
in the fieldset
so if you cannot edit markup then use
fieldset br{
display:none;
}
Upvotes: 2