页脚图标没有在位置排队

Question

我似乎无法通过随附的文字将我的社交媒体图标从上到下排列。我正在寻找关于如何能够解决这个问题的任何建议？我已经尝试了display: block等，但我似乎无法让它发挥作用。我想如果我能把它从上到下排成一列，我可以把剩下的都搞清楚了。

以下是所有代码的小提琴：

https://jsfiddle.net/o4aajsmu/

编辑：这是现在正在发生的事情的图片

Answer 1

如果我理解正确，你就会过度思考它。为什么不将所有锚标记放在同一个div中，然后在文本锚标记上使用display:inline-block？看看这个fiddle。

<div class="socialmedia">
    <a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
    <a class="socialText" href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a><br/>
    <a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
    <a class="socialText" href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a><br/>
    <a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
    <a class="socialText" href="https://twitter.com/sbvideography"><p>@sbvideography</p></a><br/>
    <a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
    <a class="socialText" href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a><br/>
    <a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
    <a class="socialText" href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a><br/>
</div>

.socialText{
  display:inline-block;
}

Answer 2

你是说你想要整个区域底部的图标吗？

如果是这样，这里有几件事。 1）clear: all不存在（both）

您应该在右侧列之后移动社交图标div，并将clear: left添加到社交图标div。这是一个更新的小提琴

Demo

.footer {
background-color: #5c0e13;
color: white;
display: inline-block;
width: 100%;
}

.favicon, .footernav, .socialmedia, .socialmediaicons {
  float: left;
}

.favicon {
	margin-left: 1%;
	margin-top: 1%;
	margin-right: 1%;
}

.footernav a {
	text-decoration: none;
	color: white;
	transition: .3s color;
}

.footernav a:hover {
	color: #db1421;
}

.socialmedia {
	margin-left: 40%;
  float: right;
}

.social {
	width: 20px;
}

.socialmedia a {
	text-decoration: none;
	color: white;
	transition: .3s color;
}

.socialmedia a:hover {
	color: #db1421;
}

.socialmediaicons {
	clear: left;
	display: block;
}

		<div class="footer">
			<div class="favicon">
				<a href="index.html"><img id="favicon" src="assets/favicon.png"></a>
			</div>
			<div class="footernav">
				<a href="index.html"><p>Home</p></a>
				<a href="ourteam.html"><p>Our Team</p></a>
				<a href="weddings.html"><p>Weddings</p></a>
				<a href="events.html"><p>Events</p></a>
				<a href="contact.html"><p>Contact</p></a>
			</div>
			<div class="socialmedia">
				<a href="https://www.facebook.com/yourstorybookmemory/"><p>Storybook Memories</p></a>
				<a href="https://www.instagram.com/yourstorybookmemory/"><p>yourstorybookmemory</p></a>
				<a href="https://twitter.com/sbvideography"><p>@sbvideography</p></a>
				<a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><p>Storybook Memories</p></a>
				<a href="mailto:inquiries@yourstorybookmemory.com"><p>inquiries@yourstorybookmemory.com</p></a>
			</div>
      <div class="socialmediaicons">
				<a href="https://www.facebook.com/yourstorybookmemory/"><img class="social" src="assets/facebook.png"></a>
				<a href="https://www.instagram.com/yourstorybookmemory/"><img class="social" src="assets/instagram.png"></a>
				<a href="https://twitter.com/sbvideography"><img class="social" src="assets/twitter.png"></a>
				<a href="https://www.youtube.com/channel/UCcMVbKyDIJN0Ht-6VjDiFKA"><img class="social" src="assets/youtube.png"></a>
				<a href="mailto:inquiries@yourstorybookmemory.com"><img class="social" src="assets/mail.png"></a>
			</div>
		</div>