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

时间:2015-12-07 21:14:03

标签: javascript html css angularjs

这是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>

有没有办法解决这个问题?

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

要解决此问题,创建一个额外的div是不够的 - 我为字母单选按钮创建了一个inline-block容器,然后为新block创建了一个firstRow容器secondRow。这样,整个rows容器可以显示在每个标签旁边。

希望这有帮助!

<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