我正在尝试在菜单上方的顶部栏上方列出联系信息和社交媒体图标(我将从主菜单导航中取出)https://grownowsma.com/
我遇到的三个问题:
1)我无法将辅助顶部栏的全部内容对齐。我希望他们在“Get in touch”区域之上 - 为此我使用了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>
答案 0 :(得分:1)
(仅供参考:这个问题写得不好。我知道这不容易,但你真的应该包含一个你想要做的最小例子。它甚至可能帮助你解决无论哪种方式,在快速浏览之后,我都不能写出我发现的东西,所以这里有一个快速回答。)
只需进行两项更改即可纠正所有三个问题。您的水平对齐问题是因为您的导航设置为col-lg-0
(在.row-menu-inner
的第一个孩子身上)。这不是全宽导航的正确值。将其更改为col-lg-12
。然后,您的其他右对齐规则将起作用。要垂直对齐社交图标,您可以将vertical-align: middle
添加到img.alignnone
规则。