html - 在 html 中混合 radio 和选中的按钮

Question

我想混合单选按钮和选中按钮，就像我在这里设计 B https://ux.stackexchange.com/questions/70531/using-mixed-radio-and-checkbox-buttons-is-there-any-efficiency-or-usability-ga

但我只能弄清楚如何单独做:

<input class="radio-input" type="radio" name="result" value="names" />
<label class="radio-label">Get names of people starting with..</label>
<input type="checkbox" id="A" name="name[]" value="n">
<label for="A">A</label>
<input type="checkbox" id="B" name="name[]" value="n">
<label for="B">B</label>

我怎样才能像设计 B 那样做到这一点？

Answer 1

您必须将它们放入单独的 div 中，然后使用 CSS 样式将它们对齐以彼此相邻。

.no-bullets {
  list-style:none;
}

   
  <h2>first row</h1>


  <ul class = "no-bullets">
    <li> <input type="radio" name="name"></li>
    <li> <input type="radio" name="name"></li>
    
    <ul class = "no-bullets">  
    <li><input type="checkbox" name="sex"></li>
    <li><input type="checkbox" name="sex"></li>
    <li><input type="checkbox" name="sex"></li>
    </ul>
  </ul>
</div>