html-css奇怪的行序

Question

嗯，我完全是前端开发的初学者，所以我可能有一个愚蠢的问题。出于某种原因，我的 div 在另一个 div 中看起来更像比正常的。因为我无法用语言很好地解释它，所以我将从 html 和 css 发布我的代码。关于如何解决这个问题的任何想法？

.footer {
	grid-column:1/-1;
	background-color: white;
}
company-name {
	font-family: 'Dosis', sans-serif;
	color:black;
	font-size: 1.2em;
}
.footer > div > a{
	font-family: 'Dosis', sans-serif;
	color:black;
	font-size: 1em;
	text-decoration:none;
}

<div class="footer">
	<div class="company-name">The Spooky Side © 2019</div>
  <div class="contact"><a href=""><br>contact</a></div>
  <div class="privacy-policies"><a href=""><br>-privacy policies</a></div>
  <div class="cookies"><a href=""><br>-cookies</a></div>
</div>

Answer 1

我已经使用 flex 将页脚的内容居中并放置在相同的高度。

我还使用 > 选择页脚内的所有潜水。

试试这个。 ;)

<footer>
        <div class="name">The Spooky Side © 2019</div>
        <div class="contact"><a href=""><br>contact</a></div>
        <div class="privacy-policies"><a href=""><br>-privacy policies</a></div>
        <div class="cookies"><a href=""><br>-cookies</a></div>
</footer>

/*F O O T E R */
.footer {
    width:100%;
    display:flex; 
    justify-content: center; /*horizontal align*/
    align-items: center; /*vertical align*/

    background-color: white;
}

.footer > div {
    margin: 0 10px
    font-family: 'Dosis', sans-serif;
    color:black;
}

company-name {
    font-size: 1.2em;
}
.footer > div > a{
    font-size: 1em;
    text-decoration:none; 
}

如果您想了解更多关于 flex 属性的信息: https://css-tricks.com/snippets/css/a-guide-to-flexbox/