Question

我使用Javascript在HTML中使用appendchild向表单添加了一堆复选框。我可以通过附加文本节点在它们之间添加空格，但是如何从它们中创建一个并行列表，如左边的一个复选框，右边的另一个复选框。类似的东西。

Checkbox1        Checkbox2
Checkboxes3      Check4

等等。

Answer 1

有几种方法可以做到这一点，浮动的div是最简单的。

<doctype html>
<html>
   <header>
      <title>Sample floated stuff</title>
      <style>
         .cb-div {
         width: 33%;
         display:block;
         float: left;
         }
      </style>
   </header>
   <body>
      <span class="cb-div">
      <label>
      <input name="test1" type="checkbox"> Test 1
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test2" type="checkbox"> Test 2
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test3" type="checkbox"> Test 3
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test4" type="checkbox"> Test 4
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test5" type="checkbox"> Test 5
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test6" type="checkbox"> Test 6
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test7" type="checkbox"> Test 7
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test8" type="checkbox"> Test 8
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test9" type="checkbox"> Test 9
      </label>
      </span>
      <span class="cb-div">
      <label>
      <input name="test10" type="checkbox"> Test 10
      </label>
      </span>
      <div style="clear:both">
         And clear:both breaks you free of floating
      </div>
   </body>
</html>

Answer 2

只需制作一张桌子，添加复选框，然后将边框设置为无。它将以正确的格式显示，并且在表格中看起来不像它。

在Javascript中制作复选框的并行列表

2 个答案: