我正在尝试创建动态导航栏。默认情况下,我希望导航栏垂直显示在跨越页面整个高度的div中,但是在调整大小时,我希望栏变为水平。这是我想要实现的目标的图片:
我试图在W3Schools suggestions之后根据我display:block;
添加ul
来塑造我的方法,但它并没有改变任何东西。我对媒体查询的理解并不是最好的,但我也尝试改变左边div(深灰色)的宽度和高度:
@media screen and (max-width: 200px) {
.nav-container{
width: 100%;
height: 200px;
background-color: #333;
border-bottom: 0.5px solid #333;
}
}
实现这一目标的最佳方法是什么?
修改:
html,
body {
height: 100%;
background-color: #fff;
}
body {
background-color: #fff;
text-align: center;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
display: block;
}
.site-wrapper {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
* {
margin: 0;
padding: 0;
}
.site-wrapper {
display: flex;
flex-wrap: wrap;
}
.nav-container {
height: 100%;
width: 200px;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.logo-holder {
position: absolute;
top: 0;
text-align: center;
}
.logo-holder img {
height: auto;
}
#navigation-div {
margin-top: -300px;
width: 100%;
}
.nav-ul li a {
display: block;
}
.nav-link {
width: 100%;
display: block;
text-align: left;
color: #fff;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #fff;
color: #333;
}
.nav ul {
width: 100%;
padding-left: 0px;
}
.nav ul li {
list-style-type: none;
width: 100%;
}
.nav ul li a {
text-align: left;
padding: 5px;
color: #fff;
text-decoration: none;
margin-left: 15px;
}
.nav li:hover {
background-color: #fff;
}
.nav li:hover a {
color: #333;
}
@media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 160px;
background-color: #333;
border-bottom: 0.5px solid #333;
}
.nav-container nav,
.nav-container nav ul,
.nav-container nav ul li,
.logo-holder {
display: inline;
}
.logo-holder {
position: absolute;
left: 0;
}
#navigation-div {
float: left;
}
}

<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img src="#" alt="Logo" />
</div>
<div id="navigation-div">
<nav class="nav left-nav-bar">
<ul class="nav-ul">
<a class="nav-link active" href="">
<li>Home</li>
</a>
<a class="nav-link" href="">
<li>Blog</li>
</a>
<a class="nav-link" href="">
<li>Store</li>
</a>
<a class="nav-link" href="">
<li>Contact</li>
</a>
</ul>
</nav>
</div>
</div>
</div>
&#13;
答案 0 :(得分:1)
首先,您的媒体查询可能根本没有被调用,因为最大宽度非常小,为200px。
在媒体查询中,您需要将导航元素的显示属性和徽标设置为内联,以便它们并排显示。 (你也可以考虑使用flexbox)你还需要重置一些更高级别的属性,比如h3徽标元素的行高。
@media screen and (max-width: 480px) {
.nav-container{
width: 100%;
height: auto;
background-color: #333;
border-bottom: 0.5px solid #333;
}
.nav-container nav,
.nav-container nav ul,
.nav-container nav ul li,
.logo-holder,
.logo-holder h3 {
display: inline;
}
.logo-holder h3 {
line-height: 1;
}
}