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

时间:2014-05-09 14:17:21

标签: java wicket wicket-1.5

我将列表传递给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元素而不是复选框

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

2 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:0)

您可以尝试以下内容:

leasedLineChildDivLeft.add(new SimpleAttributeModifier(&#34; style&#34;,&#34; margin:0 auto;&#34;))

而不是

leasedLineChildDivLeft.add(new SimpleAttributeModifier(&#34; class&#34;,&#34; metaCommentListStyle&#34;));