帶盒的離子和電話間隙中的CSS

Question

我正在做一些離子測驗，並使用ng repeat作為答案來動態創建框。 Ive蜜蜂嘗試了幾個小時，但它在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

好了，您可以為每行設置特定的長度。然后使用answer的長度創建tho的子字符串，並將其推入任何對象。例如，如果您的行的長度為5，並且答案是“超出情緒范圍”。 您必須創建3個子字符串並將其推入object。 現在實現一個嵌套的ng-repeat，首先使用包含子字符串的對象，然后在其中包含子字符串本身的希望中希望它會對您有所幫助：)