离子和phonegap中的css与盒子

Question

我正在对 ionic 进行一个小测验，并且我使用 n-g 重复动态地创建框来获取答案。我已经尝试了几个小时，但它要么在 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，首先使用 该对象包含子字符串，然后包含子字符串本身 希望对你有帮助:)