如何使用css将单选按钮组叠加在一起？

Here is the jsfiddle link, right now it is display as

这是jsfiddle链接,现在它显示为

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

I want to change the position to

我想把位置改为

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

Originally I thought wrapping it around a div would work but it didn't.

最初我认为将它包裹在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>

Is there a way to solve this?

有办法解决这个问题吗?

2 个解决方案

#1

Alright so you need to set a width on your first ng-repeat div and then I added a class called "test" and grabbed the :nth-child(4) (this is the second set of radio buttons). JSFiddle: http://jsfiddle.net/14wdtpem/ The code is below:

好吧所以你需要在你的第一个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;
}

#2

To solve this, creating one additional div wasn't enough -- I created an inline-block container for the lettered radio buttons, then a block container each for the new firstRow and secondRow. That way, the overall rows container could be displayed alongside each label.

为了解决这个问题,创建一个额外的div是不够的 - 我为字母单选按钮创建了一个内联块容器,然后为新的firstRow和secondRow创建了一个块容器。这样,整个行容器可以与每个标签一起显示。

Hope this helps!

希望这可以帮助!

<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>
      <div id="rows" style="display: inline-block">

        <div id="firstRow" style="display: block;">


          <div ng-repeat="t in test2[0]" 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>
        <div id="secondRow" style="display: inline-block">


          <div ng-repeat="t in test2[1]" 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>
      </div>


    </div>

Updated fiddle.