JQuery UI 复选框无线电堆叠在彼此之上而不是并排

Question

这是我的HTML

<div id="container">
  <div id="signals-summary-parameters-radio">
    <fieldset>
      <legend>Row Filter : </legend>
      <label for="signals-summary-radio-all">All</label>
      <input type="radio" name="radio" id="signals-summary-radio-all">
      <label for="signals-summary-radio-active">Active</label>
      <input type="radio" name="radio" id="signals-summary-radio-active">
      <label for="signals-summary-radio-new">New</label>
      <input type="radio" name="radio" id="signals-summary-radio-new">
    </fieldset>
  </div>
</div>
<div id="container-2">
  <div id="signals-summary-parameters-radio-2">
    <fieldset>
      <legend>Row Filter : </legend>
      <label for="signals-summary-radio-all-2">All</label>
      <input type="radio" name="radio" id="signals-summary-radio-all-2">
      <label for="signals-summary-radio-active-2">Active</label>
      <input type="radio" name="radio" id="signals-summary-radio-active-2">
      <label for="signals-summary-radio-new-2">New</label>
      <input type="radio" name="radio" id="signals-summary-radio-new-2">
    </fieldset>
  </div>
</div>

和我的 Javascript :

$(function() {
  $("#signals-summary-parameters-radio input").checkboxradio();
  $("#signals-summary-parameters-radio-2 input").checkboxradio();
});

最后是我的 CSS :

#container {
  display: grid;
  grid-template-rows: minmax(30px);
  grid-template-columns: repeat(10, 1fr);
}

我把它们都放在一起了this JSFiddle。

我在现实世界的网页中需要 display:grid 和其他选项（例如示例中的 container div），但它似乎会导致单选按钮堆叠一个叠一个，而不是并排。

我可以添加什么 CSS 以便单选按钮彼此相邻，就像我示例中的 container-2 div 一样？

Answer 1

指定容器内 "div" 的宽度。 https://jsfiddle.net/3ea0k4r6/1/

#container div {
  width:220px;
}