这是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>
有没有办法解决这个问题?
答案 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>