CSS 如何在输入类型中对齐标签和输入="checkbox"

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 允许您 link 输入标签

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

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

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 demo.

CSS 如何在输入类型中对齐标签和输入="checkbox"

CSS how to align label and input in input type="checkbox"

css

forms

checkbox

input