如何水平对齐fieldset元素？

时间：2015-02-09 13:50:04

标签： html css

我有以下代码。

很遗憾，我无法编辑代码，因为它是由我正在使用的系统自动创建的。我只能定义自定义CSS并在此代码段之前和之后添加HTML代码。

如何水平对齐复选框并将标签放在上方？

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：5)

问题在于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解决方案更好。

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;
}

答案 1 :(得分：2)

删除<br>

中的所有fieldset

因此，如果您无法编辑标记，请使用

fieldset br{
display:none;
}

WORKING DEMO

答案 2 :(得分：1)

fieldset br{
display:none;
}
label {
    display: block;
    width: 100%;
    float: left;
    padding-left: 5px;
}
input {
display: block;

}

答案 3 :(得分：0)

您可以将标签放在输入上方，为每个相对定位提供标签，并调整其top和left偏移量：

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>

相关问题
最新问题