Question

我创建了这个移动汉堡菜单，并尝试设置一些填充以在文本和边框之间添加一些空间。

这是HTML：

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

<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="#aboutmemobile"><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="about-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 column-contact 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 class="makeSmall" 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;" data-mce-fragment="1">&nbsp;052-6582643</span></label></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

因此，基本上现在，当用户按下链接之一时，文本会向下移动一点。我希望文字保持在同一位置，而不要集中注意力。我应该添加哪个CSS属性？

如果需要，您可以通过以下链接检查网站（仅在手机菜单上显示）：这是指向website的链接。

Answer 1

尝试将此规则添加到CSS：

#menu-solutions  .menu-item-text {
    box-sizing:border-box;
}

此外，为什么还要在悬停/焦点/活动状态上添加padding：5px？您可以尝试像这样删除它吗？

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

Answer 2

普通文本必须具有相同的间距样式和透明的边框：

#menu-solutions .menu-item-text {
  border-bottom: 2.11px solid transparent; 
  border-top: 2.11px solid transparent;    
  padding: 5px;
}

防止菜单项移到焦点上

2 个答案: