如何水平對齊fieldset元素？

Question

我有以下代碼。

不幸的是我無法編輯代碼，因為它是由我正在使用的系統自動創建的。 我只能定義自定義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> 

Answer 1

問題是與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;
}

Answer 2

刪除fieldset集中的所有<br>

所以如果你不能編輯標記然后使用

fieldset br{
display:none;
}

工作演示

Answer 3

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

}

Answer 4

您可以通過給出每個相對定位，並通過調整它們的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>