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

How to stack radio button group on top of each other using css?

本文关键字：在一起 单选按钮 何使用 css      更新时间：2023-09-26

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

有办法解决这个问题吗？

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

为了解决这个问题，创建一个额外的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>

更新的小提琴。

相关文章：