Wicket ::如何在CheckBoxMultipleChoice的复选框中添加样式边距

Question

我将列表传递给CheckBoxMultipleChoice并使用apache wicket在前端生成复选框

我想在所有复选框之间添加边距。

我的代码如下：

HTML代码

<div wicket:id="leasedLineChildChkLeft" style="width: 50%; float: right;"></div>

Java代码

 final CheckBoxMultipleChoice<Integer> leasedLineChildDivLeft = new CheckBoxMultipleChoice<Integer>("leasedLineChildChkLeft", new Model(llSpeedSelectLeft), llSpeedListLeft);

导致动态html出现在前端

    <div class="metaCommentListStyle" style="width: 50%; float: left;" wicket:id="leasedLineChildChkLeft"><input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_0" value="0" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_0">1</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_1" value="1" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_1">2</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_2" value="2" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_2">3</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_3" value="3" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_3">4</label><br>
<input type="checkbox" id="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_4" value="4" name="commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft"><label for="leasedLineChildChkLeft67-commentChoiceDiv:leasedLineDiv:leasedLineChildDiv:0:leasedLineChildChkLeft_4">5</label><br>
</div>

我试过了

leasedLineChildDivLeft.add(new SimpleAttributeModifier("class", "metaCommentListStyle"));

但结果它会将类添加到div元素而不是复选框

如何在复选框之间添加边距？

Answer 1

使用CSS子选择器设置输入样式：

div.metaCommentListStyle input {
     margin-left: 4px;
}

如果您需要更多控制标记，请使用CheckGroup / Check。

Answer 2

您可以尝试以下方式：

leasedLineChildDivLeft.add（new SimpleAttributeModifier（“style”，“margin：0 auto;”））

代替

leasedLineChildDivLeft.add（new SimpleAttributeModifier（“class”，“metaCommentListStyle”））;