最小化浏览器时,内联块不会阻止菜单元素重叠
inline-block doesn't prevent menu elements from overlapping when minimizing browser
我创建了一个菜单,其中每个 link 都具有相同的 ID #menuu 和 class .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 块由于某种原因不工作。
谢谢!
正如您在图片中看到的,elementor-element
应用了一些内联样式,这造成了重叠问题。但我认为这是计算页面宽度后页面加载的动态,你与此无关。但是您可以做的是覆盖此样式。
第一个问题:不要使用重复的 ID = 不要在一个页面上多次使用一个 ID。因此,删除所有 #menuu
id 并改用 类 样式。
菜单与一些小部件(例如社交图标,phone 没有等)在同一行,这就是为什么它没有足够的 space。
您可以使用 992px(问题开始的地方)的媒体查询以不同的方式解决您的问题(不确定哪种方式最适合您的情况)
@media only screen and (max-width:992px) {
styles here
}
更改菜单项的字体大小and/or小部件文本
font-size
一起隐藏小部件display:none
将列的宽度更改为在一行上有 3 个或任何你想要的
喜欢,例如:.elementor-166 .elementor-element.elementor-element-462f96df { width:33.33%}
使所有列的宽度为 100%,就像您将 768px
传递给
例如 .elementor-column { width:100%!important;}
无论如何,我的猜测是您可以根据屏幕尺寸使用 media queries
和不同的样式来解决这个问题。
我创建了一个菜单,其中每个 link 都具有相同的 ID #menuu 和 class .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 块由于某种原因不工作。
谢谢!
正如您在图片中看到的,elementor-element
应用了一些内联样式,这造成了重叠问题。但我认为这是计算页面宽度后页面加载的动态,你与此无关。但是您可以做的是覆盖此样式。
第一个问题:不要使用重复的 ID = 不要在一个页面上多次使用一个 ID。因此,删除所有 #menuu
id 并改用 类 样式。
菜单与一些小部件(例如社交图标,phone 没有等)在同一行,这就是为什么它没有足够的 space。
您可以使用 992px(问题开始的地方)的媒体查询以不同的方式解决您的问题(不确定哪种方式最适合您的情况)
@media only screen and (max-width:992px) {
styles here
}
更改菜单项的字体大小and/or小部件文本
font-size
一起隐藏小部件
display:none
将列的宽度更改为在一行上有 3 个或任何你想要的 喜欢,例如:
.elementor-166 .elementor-element.elementor-element-462f96df { width:33.33%}
使所有列的宽度为 100%,就像您将
768px
传递给 例如.elementor-column { width:100%!important;}
无论如何,我的猜测是您可以根据屏幕尺寸使用 media queries
和不同的样式来解决这个问题。