连续多个复选框

Question

我想创建一个包含多个选项（复选框）的页面。这是我到目前为止得到的：

<fieldset>
    <legend>Title here</legend>

    <div>
      <input type="checkbox" id="1" name="Option 1">
      <label for="AG-Wahl">1</label>
    </div>

    <div>
        <input type="checkbox" id="2" name="Option 2">
        <label for="AG-Wahl">2</label>
      </div>

    <div>
        <input type="checkbox" id="3" name="Option 3">
        <label for="AG-Wahl">3</label>
    </div>

    <div>
        <input type="checkbox" id="4" name="Option 4">
        <label for="AG-Wahl">4</label>
    </div>

    <div>
        <input type="checkbox" id="5" name="Option 5">
        <label for="AG-Wahl">5</label>
    </div>

    <div>
        <input type="checkbox" id="6" name="Option 6">
        <label for="AG-Wahl">6</label>
     </div>
     <div>
        <input type="checkbox" id="7" name="Option 7">
        <label for="AG-Wahl">7</label>
    </div>

    <div>
        <input type="checkbox" id="8" name="Option 8">
        <label for="AG-Wahl">8</label>
    </div>

    <div>
        <input type="checkbox" id="9" name="Option 9">
        <label for="AG-Wahl">9</label>
    </div>

    <div>
        <input type="checkbox" id="10" name="Option 10">
        <label for="AG-Wahl">10</label>
     </div>
    
</fieldset>

现在我想把 3 个选项排成一行，我该怎么做？

Answer 1

一种方法是使用 CSS 网格。

此代码段将您的选项放入容器“.choices”中，然后告诉网格它需要 3 列。容器有一个宽度——取决于你想要什么。这个片段只是根据字符宽度给它一个宽度。

更新：新要求是将整组选项居中。这可以通过多种方式完成。该代码段已更改为在容器上使用 flex。要增加选项之间的 space，您只需设置一个间隙即可。

legend {
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

.choices {
  display: grid;
  gap: 4em;
  grid-template-columns: 1fr 1fr 1fr;
  width: 20em;
}

<body>
  <legend>Title here</legend>
  <div class="container">
    <div class="choices">

      <div>
        <input type="checkbox" id="1" name="Option 1">
        <label for="AG-Wahl">1</label>
      </div>

      <div>
        <input type="checkbox" id="2" name="Option 2">
        <label for="AG-Wahl">2</label>
      </div>

      <div>
        <input type="checkbox" id="3" name="Option 3">
        <label for="AG-Wahl">3</label>
      </div>

      <div>
        <input type="checkbox" id="4" name="Option 4">
        <label for="AG-Wahl">4</label>
      </div>

      <div>
        <input type="checkbox" id="5" name="Option 5">
        <label for="AG-Wahl">5</label>
      </div>

      <div>
        <input type="checkbox" id="6" name="Option 6">
        <label for="AG-Wahl">6</label>
      </div>
      <div>
        <input type="checkbox" id="7" name="Option 7">
        <label for="AG-Wahl">7</label>
      </div>

      <div>
        <input type="checkbox" id="8" name="Option 8">
        <label for="AG-Wahl">8</label>
      </div>

      <div>
        <input type="checkbox" id="9" name="Option 9">
        <label for="AG-Wahl">9</label>
      </div>

      <div>
        <input type="checkbox" id="10" name="Option 10">
        <label for="AG-Wahl">10</label>
      </div>

      </fieldset>
    </div>
  </div>
</body>

显然，您需要尝试各种设置以获得所需的间距。

Answer 2

你可以分开 div

<div>
      <input type="checkbox" id="1" name="Option 1">
      <label for="AG-Wahl">1</label>
      <input type="checkbox" id="2" name="Option 2">
      <label for="AG-Wahl">2</label>
      <input type="checkbox" id="3" name="Option 3">
      <label for="AG-Wahl">3</label>
    </div>

    <div>
        <input type="checkbox" id="4" name="Option 4">
        <label for="AG-Wahl">4</label>
        <input type="checkbox" id="5" name="Option 5">
        <label for="AG-Wahl">5</label>
        <input type="checkbox" id="6" name="Option 6">
        <label for="AG-Wahl">6</label>
     </div>
     <div>
        <input type="checkbox" id="7" name="Option 7">
        <label for="AG-Wahl">7</label>
        <input type="checkbox" id="8" name="Option 8">
        <label for="AG-Wahl">8</label>
        <input type="checkbox" id="9" name="Option 9">
        <label for="AG-Wahl">9</label>
    </div>

    <div>
        <input type="checkbox" id="10" name="Option 10">
        <label for="AG-Wahl">10</label>
    </div>

Answer 3

如果您正在使用bootstrap

，请尝试使用这种方式

  <form>
    <div>
      <label for="option1" class="checkbox-inline">
          <input type="checkbox" id="1" name="option1">1
      </label>

      <label for="option2" class="checkbox-inline">
          <input type="checkbox" id="2" name="option2">2
      </label>

      <label for="option3" class="checkbox-inline">
          <input type="checkbox" id="3" name="option3">3
      </label>
    </div>

    <div>
      <label for="option4" class="checkbox-inline">
          <input type="checkbox" id="4" name="option4">4
      </label>

      <label for="option5" class="checkbox-inline">
          <input type="checkbox" id="5" name="option5">5
      </label>

      <label for="option6" class="checkbox-inline">
          <input type="checkbox" id="6" name="option6">6
      </label>
    </div>
    <div>
      <label for="option7" class="checkbox-inline">
          <input type="checkbox" id="7" name="option7">7
      </label>

      <label for="option8" class="checkbox-inline">
          <input type="checkbox" id="8" name="option8">8
      </label>

      <label for="option9" class="checkbox-inline">
          <input type="checkbox" id="9" name="option9">9
      </label class="checkbox-inline"l>
    </div>
    
    <label for="option10" class="checkbox-inline">
        <input type="checkbox" id="10" name="option10"> 10
    </label>
  </form>

Answer 4

实现这一点的方法很多。在我看来，最简单的方法是结合使用 display: inline-block; 和 width:30%.

为什么？因为你只需要添加这行代码而不需要改变你的整个html.

fieldset div {
  display: inline-block;
  width: 30%;  
}

fieldset div {
  display: inline-block;
  width: 30%;  
  margin:5px;
  text-align: center;
}

<fieldset>
    <legend>Title here</legend>

    <div>
      <input type="checkbox" id="1" name="Option 1">
      <label for="AG-Wahl">1</label>
    </div>

    <div>
        <input type="checkbox" id="2" name="Option 2">
        <label for="AG-Wahl">2</label>
      </div>

    <div>
        <input type="checkbox" id="3" name="Option 3">
        <label for="AG-Wahl">3</label>
    </div>

    <div>
        <input type="checkbox" id="4" name="Option 4">
        <label for="AG-Wahl">4</label>
    </div>

    <div>
        <input type="checkbox" id="5" name="Option 5">
        <label for="AG-Wahl">5</label>
    </div>

    <div>
        <input type="checkbox" id="6" name="Option 6">
        <label for="AG-Wahl">6</label>
     </div>
     <div>
        <input type="checkbox" id="7" name="Option 7">
        <label for="AG-Wahl">7</label>
    </div>

    <div>
        <input type="checkbox" id="8" name="Option 8">
        <label for="AG-Wahl">8</label>
    </div>

    <div>
        <input type="checkbox" id="9" name="Option 9">
        <label for="AG-Wahl">9</label>
    </div>

    <div>
        <input type="checkbox" id="10" name="Option 10">
        <label for="AG-Wahl">10</label>
     </div>
    
</fieldset>

连续多个复选框

Multiple Checkboxes in a row

html

css

checkbox