如何使用css將單選按鈕組疊加在一起？

Question

這是jsfiddle鏈接 ，現在顯示為

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;
}

Answer 2

要解決這個問題，創建一個額外的div是不夠的 - 我為字母單選按鈕創建了一個inline-block容器，然后為新的firstRow和secondRow創建了一個block容器。 這樣，整個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>

更新了小提琴 。