[英]How to horizontally align fieldset elements?
我有以下代码。
不幸的是我无法编辑代码,因为它是由我正在使用的系统自动创建的。 我只能定义自定义CSS并在此代码段之前和之后添加HTML代码。
如何水平对齐复选框并将标签放在上方?
<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>
问题是与br
进入一个新的断行。
我的解决方案是display:none
br
来渲染内联的所有复选框。 这适用于Chrome - 我对其他浏览器不太了解。
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>
为了回应您的更新,我更新了我的答案。
最初我打算position:relative
输入上方的标签。 但是,我使用的CSS只占单个数字标签。 任何更长的看起来很奇怪。
我在这里做的是在复选框中添加一个伪元素,将值作为内容,然后将它们直接放在复选框上方。 与单个数字相比,两位数仍然看起来有点奇怪,但它们看起来比position:relative
更好position:relative
我之前想到的position:relative
解决方案。
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;
}
fieldset br{
display:none;
}
label {
display: block;
width: 100%;
float: left;
padding-left: 5px;
}
input {
display: block;
}
您可以通过给出每个相对定位,并通过调整它们的top
和left
偏移来将标签定位在输入top
:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.