当我把显示:内联块在媒体查询节在css中不显示我的导航水平内联,而是显示在垂直像以前。我开始编码,我试图创建一个移动的第一网站,扩展到一个内联导航时,超过一个最小宽度。
下面是我的html:
<header>
<nav class="navbar">
<img src="images.png" alt="logo" class="logo">
<a href="mobile" id="icon" title="Mobile menu"></a>
<ul class="nav-list">
<li><a class="active" href="index.html"> Home </a></li>
<li><a href="snow.html"> Snow </a></li>
<li><a href="skate.html"> Skate </a></li>
<li><a href="accessories.html"> Accessories </a></li>
</ul>
</nav>
</header>
下面是我的CSS:
.navbar{
align-items: center;
height: 175px;
width: 100%;
background-color: #FFF;
z-index: 999;
position: fixed;
}
.nav-list {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
height: 100vh;
top: 40px;
overflow: hidden;
position: fixed;
text-align: center;
}
.nav-list li {
line-height: 15px;
margin: 5px 0;
transition: auto;
}
.nav-list li a {
color: #000;
text-decoration: none;
padding: 10px 23px;
text-transform: uppercase;
display: block;
}
.nav-list li a.active,.nav-list li a:hover{
transition: 0.75s;
color: #702963;
opacity: 0.5;
}
.navbar ul.nav-list {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
background-color: var(--grey);
list-style: none;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
@media screen and (min-width: 1440px) {
body, .navbar ul.nav-list, .navlist a, .navlist li {
width: 100%;
display: inline-block;
}
}
我尝试显示:内联块未水平显示。flex-direction:行;也不会更改为行。
1条答案
按热度按时间bqf10yzr1#
所以
flex-direction
可以在你设置display: flex
的时候工作。请尝试把你的@media
中的css修改成如下: