CSS如何在输入类型=“复选框”中对齐标签和输入

Question

我遇到一个问题，我的标签文本和相应的复选框不是彼此相邻，而是对角线。我尝试使用 float 来修复它，但它对我来说没有正确工作。

label {
  font-weight: bold;
  margin: 1em;
}

input {
  padding: 1em;
  margin: 1em;
  width: 100%;
}

<label className="toppings">Toppings: 
  <br />
  <label> Pepperoni
     <input  ype="checkbox" name="pepperoni" />
  </label>
  <label> Pineapple
     <input  type="checkbox" name="pineapple" />
  </label>
</label>

使用上面的代码，标签文本（例如“pepperoni”）位于复选框的对角上方。对如何让它们并排有任何帮助吗？

Answer 1

一些小事情：

• 首先，你不应该有一个包含其他标签和输入的标签标签（它是无效的）

• 其次，如果您想为特定输入添加标签，您可以使用允许的属性for您将标签链接到输入

label {
  font-weight: bold;
  margin: 1em;
}

<div className="toppings">after checkbox: 
  <br />
  <input type="checkbox" id="pepperoni" name="pepperoni"
         checked>
  <label for="pepperoni">Pepperoni</label>
  <br/>
  
  <input type="checkbox" id="pineapple" name="pineapple"
         checked>
  <label for="pineapple">Pineapple</label>
</div>
<br/>

<br/>
<div className="toppings">Before Checkbox: 
  <br />
  <label for="pepperoni2">Pepperoni</label>
  <input type="checkbox" id="pepperoni2" name="pepperoni2"
         checked>
  <br/>
  
  <label for="pineapple2">Pineapple</label>
  <input type="checkbox" id="pineapple2" name="pineapple2"
         checked>
</div>

Answer 2

这取决于您的最终结果在设计上应该是什么样子，但像这样更改标记是一种选择。

label {
  font-weight: bold;
  margin: 1em;
}

<div className="toppings">Toppings:<br>
  <div>
    <label for="pepperoni">Pepperoni</label>
    <input 
           type="checkbox"
           name="pepperoni"
           />
  </div>
  <div>
    <label for="pineapple">Pineapple</label>
    <input 
           type="checkbox"
           name="pineapple"
           />
  </div>
</div>

Answer 3

一种方法如下，代码中带有解释性注释：

/* a simple CSS reset to ensure that all/most elements share a common
   default sizing and layout: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.3em;
}

h2::after {
  content: ': ';
}

.toppings {
  /* using the CSS clamp function to set a variable
     width on the .toppings element; here we have
     a minimum size of 10em, a maximum size of 500px
     and otherwise the width will be 80% so long as
     80% is within the defined boundaries: */
  width: clamp(10em, 80%, 500px);
  /* CSS logical properties, for a left-to-right
     language, this equates to a margin-left and
     margin-right: */
  margin-inline: auto;
}

label {
  /* using CSS flex-box layout: */
  display: flex;
  /* vertically aligning the content
     in the center: */
  align-content: center;
  /* justifying the content so that any
     left over space appears between the
     descendant elements: */
  justify-content: space-between;
  /* in a left-to-right, top-to-bottom, language
     this is equivalent to margin-top and
     margin-bottom: */
  margin-block: 0.5em;
}

<!-- changed the <label> element to a <section>, as nesting <label> elements
     results in invalid HTML: -->
<section class="toppings">
  <!-- using a <h2> element to title the section: -->
  <h2>Toppings</h2>
  <label>Pepperoni
     <!-- corrected a typo here, 'type' was written as 'ype' which resulted in
          a text-input being shown: -->
     <input type="checkbox" name="pepperoni" />
  </label>
  <label>Pineapple
     <input type="checkbox" name="pineapple" />
  </label>
</section>

JS Fiddle 演示。