如何解决证明内容 CSS 属性不适用于类
我正在学习前端 Web 开发和设计我自己的产品组合。我偶然发现了一个关于 justify-content 和 align-item CSS 属性的问题。他们似乎对我的课程不起作用。
Protfolio Demo with current CSS & HTML
相关代码如下:
* {
Box-sizing: border-Box;
margin: 0%;
padding: 0%;
}
body {
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 20vh;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
background-color: lawngreen;
}
.nav-logo {
display: flex;
background-color: red;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
background-color: lightyellow;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
background-color: yellow;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
background-color: tomato;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
height: 100%;
}
.nav-links ul li a {
justify-content: space-evenly;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="nav-logo">logo</div>
<div class="empty-space1">lorem
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="empty-space2">lorem
<!--empty space-->
</div>
<div class="nav-links">lorem
<ul>
<li><a href="">About Me</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Tools</a></li>
</ul>
</div>
</div>
</nav>
请告诉我为什么这不起作用,我该如何解决这个问题?
谢谢 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。