汉堡菜单项折叠成 2 行
Posted
技术标签:
【中文标题】汉堡菜单项折叠成 2 行【英文标题】：Hamburger menu item collapses into 2 lines 【发布时间】：2018-11-29 07:41:59 【问题描述】：我在移动设备上建立了一个带有汉堡菜单的 Wordpress 网站。 这是菜单的 html：
<div class="elementor elementor-1303 elementor-type-section">
<div class="elementor-inner">
<div class="elementor-section-wrap">
<section data-id="84451c8" class="elementor-element elementor-element-84451c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="32037fc" class="elementor-element elementor-element-32037fc elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="01cf21a" class="elementor-element elementor-element-01cf21a elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-id="70032df" class="elementor-element elementor-element-70032df elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-settings=""background_background":"classic","background_image":"url":"","id":""" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="14d0f8d4" class="elementor-element elementor-element-14d0f8d4 elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 400;"></span><p></p></a></h4>
</div>
</div>
<div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#maya-about-mobile"><span class="menu-item-text"><span align="center">?אודות</span></span></a></h4>
</div>
</div>
<div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4>
</div>
</div>
<div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4>
</div>
</div>
<div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4>
</div>
</div>
<section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix">
<p style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" > <img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" > <label style="color: #61f6ff;" data-mce-fragment="1">| <a style="color: #001a71;" href="tel:052-6582643" data-mce-fragment="1"> 052-6582643</a></label></p>
</div>
</div>
</div>
</div>
</div>
</div>
我设法让菜单居中，但我无法让菜单底部的图标和电话号码保持在一行而不中断。我也想编辑它的填充，但它没有真的不适合我。
这是菜单的 CSS：
.menu-item-text-mobile
-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.11px solid transparent;
border-top: 2.11px solid transparent;
margin-left:50px;
#who-menu-mobile:hover .menu-item-text,
#who-menu-mobile:focus .menu-item-text,
#who-menu-mobile:active .menu-item-text
border-bottom: 2.11px solid #61f6ff;
border-top: 2.11px solid #61f6ff;
#solutions-menu-mobile:hover .menu-item-text,
#solutions-menu-mobile:focus .menu-item-text,
#solutions-menu-mobile:active .menu-item-text
border-bottom: 2.11px solid #61f6ff;
border-top: 2.11px solid #61f6ff;
#regulation-menu-mobile:hover .menu-item-text,
#regulation-menu-mobile:focus .menu-item-text,
#regulation-menu-mobile:active .menu-item-text
border-bottom: 2.11px solid #61f6ff;
border-top: 2.11px solid #61f6ff;
@media(min-width: 300px) and (max-width: 749px) .elementor-widget-heading .elementor-heading-title > a justify-content: center !important; display: flex !important;
我希望菜单的底部看起来像这样：
在这里你可以看到直播网站：www.mayabarber.co.il
我使用了实时构建器，因此 HTML 是构建器生成的，而不是我编写的。因此，我认为解决方案应该是 CSS 解决方案或 jQuery 解决方案。
非常感谢！
【问题讨论】：
它看起来已经是您需要的了。 是的，我通过将 更改为 解决了这个问题，只是好奇为什么 a 会换行。 您可以回答自己的问题并将其标记为已解决。 谢谢，我刚做了。也感谢愿意提供帮助。 :-) 哈哈，刚刚发了一篇关于Edge浏览器的文章。我正在这里经历一个学习过程。 :-) – Rozi Buber 37 分钟前 【参考方案1】：找到解决方法，将 HTML 从 <a style=....> 更改为 <span style=...>。
【讨论】：
以上是关于汉堡菜单项折叠成 2 行的主要内容，如果未能解决你的问题，请参考以下文章