javascript - 如何使用CSS将单选按钮组堆叠在一起？

Question

这是 jsfiddle link , 现在显示为

label1 a b c d e f
label2 a b c d e f

我想把位置改成

label1 a b c
       d e f
label2 a b c
       d e f

最初我认为将它包裹在一个 div 周围会起作用，但它没有。

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div ng-repeat="k in test">
      <input type="radio" name="what" value="k" >
     <div style="display: inline-block;">
        label {{k}}
      </div>

      <!-- getting rid of this inline-block here will cause the first group not align in the same horizontal line -->
      <div ng-repeat="t in test2" style="display: inline-block;">
        <div>
        <div ng-repeat="n in t" style="display: inline-block;">
          <input type="radio" name="what2" value="n" >
          <div style="display: inline-block;">
            {{n}}
          </div>
        </div>
        </div>
      </div>
</div>

有办法解决吗？

Answer 1

好的，所以您需要在第一个 ng-repeat div 上设置宽度，然后我添加了一个名为“test”的类并获取了 :nth-child(4)(这是第二组单选按钮)。 JSFiddle:http://jsfiddle.net/14wdtpem/ 代码如下:

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div class="test" ng-repeat="k in test" style="width:200px">
      <input type="radio" name="what" value="k" >
      <div style="display: inline-block;">
        label {{k}}
      </div>

      <div  ng-repeat="t in test2" style="display: inline-block; ">
        <div >
        <div   ng-repeat="n in t" style="display: inline-block; ">
          <input   type="radio" name="what2" value="n" >
          <div  style="display: inline-block;">
            {{n}}
          </div>
        </div>
        </div>
      </div>

</div>

CSS:

.test :nth-child(4){
  margin-left:65px;
}