jquery - 使内容在所有电话设备上都保持在一行中

Question

我创建了一个汉堡移动菜单，并试图在该菜单中包含联系信息。

我尝试了两种方法:第一种方法适用于所有设备，但 iPhone 和其他主要使用 safari 的设备除外。然后带有文本的行会中断。

这种方法还涉及媒体查询。我必须说，当你用你的桌面检查它时，它看起来不错，但在实际的电话设备上，该行在图标后分成两部分。

这是该方法的源代码:

<div class="elementor-widget-container">
  <div class="elementor-text-editor elementor-clearfix">
    <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">&nbsp;</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">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
  </div>
</div>

我尝试过第二种方法，有点管用，但图标看起来比我定义的 px 小，而且看起来很乱。

<div class="elementor-text-editor elementor-clearfix elementor-inline-editing" data-elementor-setting-key="editor" data-elementor-inline-editing-toolbar="advanced">
  <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">&nbsp;</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">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
</div>

CSS 代码:

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

.active {
  border-bottom: 2.11px solid #61f6ff;
  padding: 4px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

所以我不确定采用哪种方法，我只想让这两个图标和电话号码保持在线状态，无论它是什么浏览器或电话设备。我还希望它们之间的间距相等，并且我希望图标的宽度为 33 像素。

这是您可以检查这两种方法的网站:www.mayabarber.co.il

如果您更喜欢生成自己的响应式 HTML/CSS 代码并忽略我笨拙的尝试，这就是我希望它看起来的方式:

谢谢!

Answer 1

根据上面给定的链接，我想如果您只需将以下 CSS 添加到要应用此更改的媒体屏幕，您的问题就会得到解决。

您还可以减少填充或将其设置为 % 而不是 px。

.elementor-nav-menu a{
   display: inline-flex;
}

希望对您有所帮助。