How do I css checkbox and radio button in a form?

Question

我想这样显示：

You 're in: ()Europe ()Africa
            ()Australia ()Asia ()America

What are your hobbies: []Swimming []Cooking []Shopping
                       []Sport []Dance []Sing

但现在我变成了这样：

You 're in: ()Europe ()Africa ()Australia ()Asia ()America
What are your hobbies: []Swimming []Cooking []Shopping []Sport []Dance []Sing

我的html：

<div class="container radio-container">
   <span>You are in:</span>
   <input type="radio" id="europe" name="regions" value="europe">Europe
   <input type="radio" id="africa" name="regions" value="africa">Africa
   <input type="radio" id="australia" name="regions" value="australia">Australia
   <input type="radio" id="asia" name="regions" value="asia">Asia
   <input type="radio" id="america" name="regions" value="america">America
</div>

<div class="container checkbox-container">
   <span>What are your hobbies:</span>
   <input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming
   <input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking
   <input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping
   <input type="checkbox" id="sport" name="sport" value="sport">Sport
   <input type="checkbox" id="dance" name="dance" value="dance">Dance
   <input type="checkbox" id="sing" name="sing" value="sing">Sing
</div>

请帮忙！

如何在表单中使用 CSS 复选框和单选按钮？

Answer 1

.container {
  display: flex;
  width: 100%;
  gap: 16px;
}

.label {
  white-space: nowrap;
}

.inputs-container {
  display: flex;
  flex-wrap: wrap;
}

.demo-small-width-continer {
  max-width: 400px;
}

<div class='demo-small-width-continer'>
  <div class="container radio-container">
   <span class='label'>You are in:</span>
   <div class='inputs-container'>
     <label><input type="radio" id="europe" name="regions" value="europe">Europe</label>
     <label><input type="radio" id="africa" name="regions" value="africa">Africa</label>
     <label><input type="radio" id="australia" name="regions" value="australia">Australia</label>
     <label><input type="radio" id="asia" name="regions" value="asia">Asia</label>
     <label><input type="radio" id="america" name="regions" value="america">America</label>
   </div>
  </div>

  <div class="container checkbox-container">
   <span class='label'>What are your hobbies:</span>
   <div class='inputs-container'>
     <label><input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming</label>
     <label><input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking</label>
     <label><input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping</label>
     <label><input type="checkbox" id="sport" name="sport" value="sport">Sport</label>
     <label><input type="checkbox" id="dance" name="dance" value="dance">Dance</label>
     <label><input type="checkbox" id="sing" name="sing" value="sing">Sing</label>
   </div>
  </div>
</div>

1. 为您的输入类型复选框/收音机添加一个

   label

   标签包装器总是一个好主意——当用户点击文本（占位符）时——他会自动点击收音机/复选框；
2. 如果你想拥有你所描述的结构，你需要为你的复选框/单选元素包装一个包装器（例如，div）；
3. 之后你可以为这个包装器设置 flex 样式。

我添加了一个

demo-small-width-continer

包装器用于测试，您的代码中不需要它。

Answer 2

您好/您可以简单地将 ()Australia , ()Asia , ()America 放入一个 div 中。因为 div 有一行。接下来你应该做的是向 div 左右添加一些 paddign 在你的爱好中也使用这个逻辑。

  <div class="container radio-container">
    <div class="row">
      <label for="regions">You are in:</label>
      <input type="radio" id="europe" name="regions" value="europe">Europe
      <input type="radio" id="africa" name="regions" value="africa">Africa
    </div>
    <div class="row" style="padding: 0px 74px 0px 74px;">
      <input type="radio" id="australia" name="regions" value="australia">Australia
      <input type="radio" id="asia" name="regions" value="asia">Asia
      <input type="radio" id="america" name="regions" value="america">America
    </div>
  </div>
  <br>
  <div class="container checkbox-container">
    <div class="row">
      <label for="hobbies">What are your hobbies:</label>
      <input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming
      <input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking
      <input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping
    </div>
    <div class="row" style="padding: 0px 154px 0px 154px;">
      <input type="checkbox" id="sport" name="sport" value="sport">Sport
      <input type="checkbox" id="dance" name="dance" value="dance">Dance
      <input type="checkbox" id="sing" name="sing" value="sing">Sing
    </div>
  </div>