在jsf / html中的每两个复选框周围使用带有虚线框的复选框实现模态？

Question

我想在下面的模态结构中有一个html / jsf代码：

我只需要知道如何在两个复选框周围加上虚线框。

我需要实现上面提到的模态。

我使用jsf做的是：

                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>

我刚试过上面的代码，只是手动添加复选框和标签，这不是一个好的解决方案。

请帮帮我。

Answer 1

这是一个简单的例子 - fiddle： HTML

<div class="input-box">
  <label class="label-float">
    <input type="checkbox" name="example" value="one">value one
  </label>

  <label class="label-float">
    <input type="checkbox" name="example" value="two">value two
  </label>
</div>

CSS

.input-box {
  border: 1px dotted #000;
  padding: 10px;
  display: block;
  width: 240px;
}
.input-box::after {
  content: "";
  clear: both;
  display: table;
}
.label-float {
  float: left;
  display: block;
  width:50%;
}