HTML页面的按钮对齐在移动视图中变得不安

如何解决HTML页面的按钮对齐在移动视图中变得不安

我在div中包含了一些按钮，可以从PC浏览器中正确查看。但是在移动浏览器中，它无法正常显示。

移动视图的SS

PC视图的SS

//CSS code
.tools {
    position: absolute;
    z-index: 4;
    height: 30px;
    top: 7px;
}
.tools button {
    border: 2px solid transparent;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
}


//HTML code
<div class="tools">
    <button id="btnRun" mode=1 onclick="runcode();">Run</button>
    <button id="btnClearOutput" onclick="clearOutput();">Clear</button>
    <button title="Open a file" onclick="openFile();">Open</button>
    <button title="Save code" onclick="saveCode();">Save</button>
    <button onclick="toggleTheme();">Theme</button>
    <button id="btnRaise" onclick="raise();">Raise &#x270B</button>
</div>

我希望所有按钮都像PC视图一样排成一行。而且PC视图也包含问题。文字中带有表情符号的提升按钮未正确垂直对齐。

我应该怎么做才能解决这个问题？

P.S。 很抱歉在此之前提到这一点。我已经设置了元标记，如下所示 <Meta name='viewport' content='width=device-width'> 当我删除上述所有已解决的问题时。但是随后页面最初并未缩放以适合窗口。但是我想适合窗户。

谢谢

解决方法

好像您的外部工具在右侧创建了一些填充，没有为最后一个按钮留出足够的空间。尝试检查您是否有这种填充。

建议：尝试使用Flexbox或网格创建相同的布局，以提高响应速度和控制力。

,

.tools button {
    border: 2px solid transparent;
    padding: 4px 10px;
}

@media screen and ( max-width: 480px ){
  .tools button {
    padding: 4px 4px;
  }
}