Question

我创建了一个带有多个项目的移动汉堡菜单。问题是，当我尝试编辑CSS并进行更改时，它们在我的检查预览中看起来很好，但是当我实际在移动设备上查看网站时，却没有完全看到我想要实现的样式。这是我尝试做的事情：

我想更改:: focus上可见的边框之间的距离（使它们离文本更远）。当我进行检查时，它看起来与我在手机上签出时有所不同。我尝试将margin: 30px 0; padding-top: 25px;添加到span类中，但是没有在电话上使用。

我尝试过更改边距，填充并使用whitespace：nowrap。当我在桌面上预览更改时看起来不错，但是当我检出手机时，我的样式看起来有所不同。

这是菜单的HTML：

<div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd 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 data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-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></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" width="33" height="33">&nbsp;<img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|&nbsp;<span style="color: #001a71;" href="tel:052-6582643" data-mce-fragment="1">&nbsp;052-6582643</span></label></p></div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>

这是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;
  display: inline-block;
    margin: 20px 0;
        padding-top: 25px;

}

.menu-item-text-mobile::after 
    bottom: 1px;                  
}

#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; 
margin-top: 5px;
margin-bottom: 5px;
border-top: 2.11px solid #61f6ff; 
bottom: -3px;
}
#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; 
  display: inline-block;
    margin: 20px 0
}

#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;
 }}

如果您想查看以下网站，请访问：mayabarber.co.il

这是我希望它的外观的屏幕截图：

谢谢！

Answer 1

1和2：

用于调整选项目标跨度之间的距离并减少其上的边距以使它们彼此之间更近。您可以像这样将类添加到您的跨度中，然后使用填充使行距文本更远。玩的值。

看起来像这样：

<span class="spanMenu">

.spanMenu {
    padding: 5px;
    margin-bottom: -20px;
}

3。

要防止电话号码进入两个不同的行，请使用@media

当前正在检查并努力获取正确的CSS，请耐心等待。

要调整大小，您可以像这样在p标签中添加class =“ makeSmall”：

<p style="text-align: center;" class="makeSmall">

然后将此@media添加到您的CSS

@media only screen and (max-width: 600px) {
    .makeSmall {
        font-size:12px;
    }
}

这将允许您仅调整p标签中的文本大小。这是一种快速而肮脏的方式。我没有时间去做CSS的层次结构，以CSS为目标。我希望这会有所帮助。：）

Answer 2

问题可能出在手机未正确清除其缓存中吗？您可以尝试借用从未访问过该站点的其他人的电话，然后用他们的电话进行查看吗？

如果这可以解决您的问题，则应该弄清楚如何清除手机中的缓存以继续开发。

汉堡菜单样式在手机上看起来不一样

2 个答案: