最小化浏览器时，inline-block 不会阻止菜单元素重叠答案

【问题标题】：inline-block doesn't prevent menu elements from overlapping when minimizing browser最小化浏览器时，inline-block 不会阻止菜单元素重叠
【发布时间】：2018-11-27 07:14:23
【问题描述】：

我创建了一个菜单，其中的每个链接都具有相同的 ID #menuu 和类 .menu-item。我没有编写任何 HTML，因为它是使用实时页面构建器创建的。

我有以下 CSS：

#menuu { 
text-decoration: none; 
color: #0B1B70; 
} 

.menu-item-text {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11 pxpx solid transparent; 
border-top: 2.11 pxpx solid transparent; 
padding: 0px; 
height: 35px 
}


#menuu:hover .menu-item-text, 
#menuu:focus .menu-item-text, 
#menuu:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

.active { border-bottom: 2.11px solid #61f6ff !important; 
border-top: 2.11px solid #61f6ff !important; }

#menuu
{
min-width: 60pxpx;
max-width: 235.97px;
width: 100%;
padding-left: 5%;
padding right: 5%;
white-space: nowrap;
position: inline-block
display: flex;
justify-content: center;
align-items: center;

}

我想在最小化浏览器宽度时防止菜单项相互重叠。现在他们都走到了页面的中心，互相覆盖。你可以在这里检查它：mayabarber.co.il。 Display:inline 块由于某种原因无法正常工作。

谢谢！

【问题讨论】：

each link in it has the same ID #menuu ??切勿使用重复的 ID！你能也分享一下HTML吗？所以你创建了一个工作示例？
嗨 Mihai，我还没有创建 HTML，因为我使用了一个名为 Elementor 的实时网站构建器用于 wordpress。我在上面分享了一个链接。感谢您愿意提供帮助。
检查元素 -> 复制菜单的 HTML -> 粘贴到这里 :)
尝试删除white-space: nowrap;
i.imgur.com/IuFDQcj.png

标签： css wordpress elementor

【解决方案1】：

第一个问题：不要使用重复的 ID = 不要在一个页面上多次使用一个 ID。所以删除所有#menuu id 并改为设置类的样式。

菜单与一些小部件（例如社交图标、电话号码等）位于同一行，这就是它没有足够空间的原因。

您可以使用 992px 的媒体查询（问题开始的地方）以不同的方式解决您的问题（不确定哪种方式最适合您的情况）

@media only screen and (max-width:992px) {
    styles here
}

更改菜单项和/或小部件文本的字体大小 font-size
一起隐藏小部件display:none
将列的宽度更改为一行 3 或任何你想要的喜欢，例如：.elementor-166 .elementor-element.elementor-element-462f96df { width:33.33%}
将所有列设为 100% 宽度，当您传递 768px 时会发生这种情况例如.elementor-column { width:100%!important;}

无论如何，我的猜测是您可以使用media queries 和不同的样式来解决这个问题，具体取决于屏幕大小。

【讨论】：

感谢所有详尽的建议。我从未使用过这些媒体查询，它们可以应用于特定的类或 id 吗？
w3schools.com/Css/css_rwd_mediaqueries.asp 或这里developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
谢谢。我开始玩弄那个。一切看起来都很好，直到我打开我的笔记本电脑，它也有 1920 宽度的分辨率。如果在我的 PC 屏幕上 @media (min-width: 1920px) 属性看起来不错，会导致差异的原因是什么？
min-width:1920px 表示它适用于 1920px 及以上（1921,1922 等）的屏幕。也可以尝试添加@media only screen and (min-width:1920px) 或max-width
不，我问的是我在使用 PC 屏幕时是否设置了 1920 屏幕的样式，然后在分辨率为 1920 像素的笔记本电脑上检查它，它看起来不一样。

【解决方案2】：

正如您在图片中看到的，elementor-element 应用了一些内联样式，这导致了重叠问题。但我认为在计算页面宽度后页面加载是动态的，你与此无关。但是你可以做的是覆盖这种风格。

【讨论】：