HTML 页面的按钮对齐在移动视图中变得不正常答案

【问题标题】：Button alignments of HTML page get upset in mobile viewHTML 页面的按钮对齐在移动视图中变得不正常
【发布时间】：2021-02-11 15:44:57
【问题描述】：

我在 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视图也存在问题。文本中包含表情符号的升起按钮未正确垂直对齐。

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

附：很抱歉之前提到了这一点。我设置了如下元标记 <meta name='viewport' content='width=device-width'> 当我删除上述所有问题时。但是页面最初并没有缩放以适应窗口。但我想适应窗口。

谢谢

【问题讨论】：

检查您的工具类并检查可能是工具类没有 100% 宽度，
该 div 的宽度超过 360，因此只有在移动版中像这样出现，您需要正确的媒体查询以减小宽度或使其在移动版中居中
@NoumanAhmed 感谢您的回复。我已经更新了这个问题。你还有什么想法吗。

标签： html css button alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

似乎您的外部工具 div 在右侧创建了一些填充，这没有为最后一个按钮提供足够的空间。尝试检查您是否有这样的填充。

建议：尝试使用弹性框或网格创建相同的布局，以获得更好的响应和控制。

【讨论】：