顶部菜单 CSS - 存在对齐和链接问题

Question

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

我遇到的三个问题：

1) 我无法使辅助顶部栏的全部内容正确对齐。我希望它们位于 "Get in touch" 区域上方 - 为此，我尝试了各种 CSS 选择器，使用 align: right 和 align-contents: right;没有成功

2) 我希望电子邮件和 phone 号码垂直对齐，以便与图标一起看起来更好。我尝试过各种带有 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 的第一个 child 上）。这不是 full-width 导航的正确值。将其更改为 col-lg-12。您的其他 right-aligning 规则将起作用。要垂直对齐社交图标，您可以将 vertical-align: middle 添加到 img.alignnone 规则。

Answer 2

您需要将此 class col-lg-0 middle 更改为 col-lg-12 ，或使用 css .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;}

设置样式

顶部菜单 CSS - 存在对齐和链接问题

Top menu CSS - having alignment and linking issues

html

css

wordpress

inline

menu