html - 带有盒子的 ionic 和电话间隙中的CSS

Question

我正在用 ionic 做一个小测验，我使用 n-g repeat 动态创建方框作为答案。我尝试了几个小时，但它要么在 ipad 上运行良好，要么在 iphone 上运行良好，反之亦然。这是它在我手机上的样子:

在我的ipad上

我想做的就是拥有一个带有答案的对象，例如“过度情绪”，并动态创建与答案对应的框，因此对于这个例子 [][][][] [][][ ] [][][][]..

我正在使用 ng-repeat 来完成我在示例中的操作:

<form>
<span ng-repeat="content in answerArr track by $index" class="single-input"><span style="margin-right:10px;"></span><!--this adds space -->
<div class="testingg" style="width:50%;margin-right:auto;">
<div style="width:50%;margin-right:auto;margin-left:auto;">
<span class="single-input" ng-repeat="contentt in content track by $index">

<div class="row"style="">
          <span ng-if="$index < content.length">
              <div class="box single-number" style="">
                    <input type="text" class="" focus maxlength="1">
               </div>
           </span>
           </div>
</div>
</span>
</div>
</span>
</form>

是否有更好的方法来做到这一点，或者我是否遗漏了一些明显的东西？我试图实现那种居中的 css，如果单词重叠，那么它会转到下一行.. 如下所示

尽管他们使用 __ 而我使用的是盒子。谁能帮忙？

Answer 1

好吧，您可以为每一行设置特定的长度。并使用答案的长度创建 tho 的子字符串并将它们插入任何对象。就像如果您的行的长度是 5 并且您的答案是“情绪高涨”。您必须创建 3 个子字符串 并将它们插入 object 。现在实现一个嵌套的 ng-repeat，首先是 该对象包含子字符串，然后在其中包含子字符串本身 希望对你有帮助:)