是什么造成了我的移动菜单项之间的巨大空白?

时间:2018-06-24 17:54:23

标签: html ios css menu responsive

我创建了一个汉堡移动菜单,由于某种原因,那里的链接之间存在不必要的间隙。

  @media only screen and (max-width: 440px) {
  .elementor-nav-menu a {
    display: inline-block;
  }
  .mobilemenucontact {
    white-space: nowrap;
    position: relative;
    width: 100%;
    display: inline-block;
  }
  #mobilemenucontact {
    white-space: nowrap;
    position: relative;
    width: 100%;
    display: inline-block;
  }
  @media only screen and (max-width: 375px) {
    .makeSmall {
      font-size: 95%;
    }
  }
  @media only screen and (max-width: 375px) {
    .email-mobile {
      width: 28px;
    }
  }
  @media only screen and (max-width: 375px) {
    .facebook-mobile {
      width: 28px;
    }
  }
  @media only screen and (max-width: 375px) {
    .column-contact {
      padding: 5px 30px;
    }
  }
  @media only screen and (max-width: 375px) {
    .mobilenumber {
      color: #142c7c !important
    }
  }
  .active {
    border-bottom: 2.11px solid #61f6ff;
    padding: 4px;
    box-sizing: border-box;
    margin-bottom: 4px;
  }
<p class="makeSmall" style="text-align: center;">
  <a href="mailto:maya@mayabarber.co.il"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33" /></a>
  <a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33" /></a>
  <label style="color: #61f6ff;" data-mce-fragment="1"> | <a class="mobilenumber" style="color: #001a71;" href="tel:052-6582643" data-mce-fragment="1">052-6582643</a></label></p>

我希望它只能成一行,并且在所有电话设备上看起来像这样: enter image description here

当我尝试使Safari和iPhonems看起来不错时,我曾遇到一些问题。如果您想检查以下内容,请访问以下网站链接:www.mayabarber.co.il 有任何想法吗? 我可以根据需要替换CSS和HTML。

0 个答案:

没有答案