html - 顶部菜单 CSS - 有对齐和链接问题

Question

我正在尝试在该网站的菜单上方制作一个顶部栏，其中列出了联系信息和社交媒体图标(我会将它们从主菜单导航中移除)https://grownowsma.com/

我遇到的三个问题:

1) 我无法使次顶栏的全部内容正确对齐。我希望他们位于“取得联系”区域上方 - 为此，我尝试了各种使用 align: right 和 align-contents: right 的 CSS 选择器；没有成功

2) 我希望电子邮件和电话号码垂直对齐，以便与图标一起看起来更好。我尝试过各种带有 vertical-align: center 的选择器。我读到 VA 只能内联工作，但这是内联的，所以我很困惑。

3) 如果您单击 Facebook 图标，它会打开，但如果您单击任何其他社交图标，它们不会打开。我尝试将每个社交图标包装成一个这样也许将它们分开会有所帮助，但由于某种原因没有运气。关于更改 HTML 以使链接适用于所有四个社交媒体图标的任何想法？

<p style="text-align: right; font-family: 'Muli'; vertical-align: center;">
   <a href="mailto:josh@grownowsma.com">josh@grownowsma.com</a>  |  <em><a
      href="tel:(978)%20857-4349" target="_blank" rel="noopener">978-857-
   4349 </a>  |  </em><span><a href="https://www.facebook.com/Grow-Now-Social-
      Media-Agency-1275074409247860/" target="_blank" rel="noopener"><img
      class="alignnone wp-image-520" src="https://grownowsma.com/wp-
      content/uploads/2017/11/facebook.png" alt="" width="25" height="25" /> </a>
   </span><span><a href="https://twitter.com/grownowsma" target="_blank"
      rel="noopener"><img class="alignnone wp-image-519"
      src="https://grownowsma.com/wp-content/uploads/2017/11/twitter.png" alt=""
      width="25" height="25" /></a></span><span> <a
      href="https://www.instagram.com/grownowsma/" target="_blank"
      rel="noopener"> </a><a href="https://www.instagram.com/grownowsma/"
      target="_blank" rel="noopener"><img class="alignnone wp-image-521"
      src="https://grownowsma.com/wp-content/uploads/2017/11/instagram.png" alt=""
      width="25" height="25" /> </a></span><span><a
      href="https://www.linkedin.com/company/11331850/" target="_blank"
      rel="noopener"><img class="alignnone wp-image-518"
      src="https://grownowsma.com/wp-content/uploads/2017/11/linkedin.png" alt=""
      width="25" height="25" /></a></span>
</p>

Answer 1

(仅供引用:这个问题写得不好。我知道这并不容易，但你真的应该包括一个你正在尝试做的事情的最小例子。它甚至可能帮助你自己解决它. 不管怎样，在快速浏览之后，我不能不写我发现的东西，所以这里有一个快速的答案。)

所有这三个问题都应该可以通过两个更改来纠正。您的水平对齐问题是因为您将导航设置为 col-lg-0(在 .row-menu-inner 的第一个子节点上)。这不是全 Angular 导航的正确值。将其更改为 col-lg-12。您的其他右对齐规则将起作用。要垂直对齐社交图标，您可以将 vertical-align: middle 添加到您的 img.alignnone 规则中。