我正在尝试在移动设备上制作水平导航栏,在更宽的视口(viewport)上制作垂直导航栏。这是一个单栏网站布局。
我试过了,但找不到方法。
#main-nav {
margin-top: 105px;
margin-left: 300px
}
#main-nav a {
font-weight: bolder;
display: block;
float: left;
text-align: center;
width: 95px;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #a0a0a0;
text-transform: uppercase;
font-size: 0.7em;
}
<div id="main-nav">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">contact</a>
<a href="#">blog</a>
</div>
最佳答案
尝试使用媒体查询
来处理定位,如果可以使用display: flex
也会更好。
这是我完成的示例代码。媒体查询设置为标签设备的最大宽度。随意将其更改为移动尺寸并进行测试。希望对您有所帮助。
.main-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.main-nav a {
font-weight: bolder;
width: 95px;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #a0a0a0;
text-transform: uppercase;
font-size: 0.7em;
}
@media (max-width: 767px)
/* Set max-width in preference to your device. Currently set to tab size so if the page is viewed from a tab screen and below the menu will be shown vertically */
{
.main-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
}
<div class="main-nav">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">contact</a>
<a href="#">blog</a>
</div>
关于html - 有没有办法让一栏网站布局响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57143950/