html - 为 iPhone 8 显示屏配置导航栏

Question

在 iPhone 8 上，带有我构建的 JavaScript 游戏的模式和结果的导航栏/条纹不会在一行中显示所有元素，而是导致最后一个模式(硬)下降到第二行。我尝试了多种调整大小和 flexbox 选项，但似乎无法修复它。任何帮助将不胜感激。

这是 HTML:

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button class="mode">Easy</button>
    <button class="mode selected" class="selected">Hard</button>
</div>

这是 CSS:

#stripe {
    background-color: white;
    text-align: center;
}

#message {
    display: inline-block;
    width: 20%;
}

@media (max-width: 480px) {
  #container {
    margin-top: 10px;
  }
  #colorDisplay {
    font-size: 100%;
  }
}

Answer 1

您可以使用 flex 尝试此解决方案。

#stripe {
    display:flex;
    justify-content:center;
    align-items: center;
    
    background-color: white;
}

#message {
    flex-basis: 20%;
    text-align: center;
}

<div id="stripe">
    <button id="reset">New Colors</button>
    <span id="message"></span>
    <button class="mode">Easy</button>
    <button class="mode selected" class="selected">Hard</button>
</div>