css - 强制菜单保持在 1 行并强制页面有 1 页没有滚动

Question

我希望主导航菜单在所有屏幕上都位于 1 行，而不仅仅是大屏幕，我希望主页是 1 页静态页面，没有滚动，只有封面和页脚。

这是网站:http://alaa.x10host.com

我尝试了很多方法，比如为容器和导航菜单显示 flex 和宽度 100%，但我尝试了很多，但没有任何效果

显示:flex;

宽度:100%;

字体大小:1vw

一个完整的 1 个静态页面，在所有屏幕尺寸上都没有滚动和完整菜单。

Answer 1

至于菜单 - 将这一行添加到您的 css

@media (min-width: 960px)
.row .primary-menu-ul>li {
width: inherit;
padding: 10px 0;
width: 20%;

这将告诉所有 li 元素它们不能超过其父元素的 20%，并且由于您有 5 个菜单项，它们将始终占据 100%。

至于滚动 - 您需要将所有与填充和边距相关的大小从 px 调整为 %/em 并摆脱内部容器的最小高度 css 规则(我指的是带有背景图像的那个)。喜欢这里:

.elementor-159 .elementor-element.elementor-element-1dd43d0 > .elementor-container {
/* min-height: 34vh; */

这条规则我注释掉了。还看到了一些以像素为单位设置的填充以及字体大小。该网站的主要问题是内部容器不是 100% 响应，这就是为什么您可能会在移动设备上看到垂直滚动。