Javascript生成的元素在移动设备上总是重叠

我正试图根据本教程构建一个测验： 我没有触及太多的逻辑和添加引导集成（+元视口标记）。仅供参考，我尝试了没有这些变化，我的问题仍然存在

这个测验很简单，但我正在努力让它在移动设备上工作。问题是我不确定这个问题的真正根源，因此，我很难准确地描述它

在该教程中，问题及其答案由javascript生成，而下面的导航/提交按钮则不是，这意味着我必须为生成问题/答案的容器设置最小高度。否则，按钮将显示在js生成的代码之前，按钮将显示在问答容器的顶部。非常合乎逻辑：

<div class="quiz-container">
    <div id="quiz">JS generated Questions and Anwsers go here</div>
</div>            
<button id="previous">&lt;&lt;</button>                                     
<button id="next">&gt;&gt;</button>                                    
<button id="submit">Submit</button>
<button id="reset">Reset</button>   
<span id="results"></span>                                                                              

JS生成的问题和Anwser在这里
提交
重置

它在台式机上运行良好，但在移动设备上运行不太好： 答案和问题重叠，使得测验无法使用，特别是因为我将提交的好答案添加到他们的广播元素中，产生了更多的重叠

我尝试用CSS在手机上设置另一个最小高度，我尝试使用“vh”单位，我尝试使用边距/填充，但无论我做什么，它在手机上总是这样。实际上，更改按钮区域周围的边距或填充将对桌面视图产生影响，但对移动设备没有影响。元素将始终以相同的方式重叠

我相当肯定手机页面结构中的一些逻辑我不明白，但尽管我做了很多研究和尝试，我真的不能把手指放在上面

---

你知道吗？

首先，使用百分比和vw作为测量单位。 其次，在css中使用框大小属性并将其设置为边框框。 最后，请阅读更多关于@media和。这段代码非常重要：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

首先，使用百分比和vw作为测量单位。 其次，在css中使用框大小属性并将其设置为边框框。 最后，请阅读更多关于@media和。这段代码非常重要：

<meta name="viewport" content="width=device-width, initial-scale=1.0">