CSS如何在輸入型別=“復選框”中對齊標簽和輸入

我有一個問題，我的標簽文本和相應的復選框或不是彼此相鄰，而是對角線。我嘗試使用 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”）在復選框的斜上方。關于如何讓它們并排的任何幫助？

uj5u.com熱心網友回復：

幾件小事：

• 首先你不應該有一個包含其他標簽的標簽標簽并在其中輸入（它是無效的）

• 其次，如果您想為特定輸入添加標簽，您可以使用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>

uj5u.com熱心網友回復：

這取決于您的最終結果在設計方面應該是什么樣的，但是像這樣更改您的標記是一種選擇。

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>

uj5u.com熱心網友回復：

一種方法如下，代碼中有解釋性注釋：

/* 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 小提琴演示。

標籤：css 形式 输入 复选框

上一篇：在引導程式中混合行內和垂直表單

下一篇：在contenteditable中按enter將其復制線條樣式/標題到下一行