我的导航仪分为两个div。一个div代表左侧,另一个div代表右侧,因为我想在它们之间的中间留出很大的空隙。所以左导航有浮动。右边的人有浮动。看起来像这样:HOME ABOUT PORTFOLIO CONTACTS
现在,当我希望它能够响应并在屏幕小于650px时很好地彼此堆叠在中间时,会发生这种情况:它将居中,但HOME和ABOUT链接位于左侧和CONTACTS,PORTFOLIO位于右侧。但是我希望它们全部4均等地堆叠在一起。要很好地对齐。我试了清楚:但没有帮助。看起来像这样:HOME ABOUT PORTFOLIO CONTACTS
但我希望它像:HOME ABOUT PORTFOLIO CONTACTS
我该怎么办?
这是代码:
HTML:
<div class="menu-small">
<div class="menu-left">
<ul>
<li><a class="a-menu-left" href="#">HOME</a></li>
<li><a class="a-menu-left" href="#">ABOUT</li>
</ul>
</div>
<div class="menu-right">
<ul>
<li><a class="a-menu-right" href="#">PORTFOLIO</li>
<li><a class="a-menu-right" href="#">CONTACTS</li>
</ul>
</div>
</div>
CSS:
.menu-left {
font-family: "roboto", "sans-serif";
}
.menu-right {
font-family: "roboto", "sans-serif";
}
.a-menu-left {
text-decoration: none;
color: #555555;
float: left;
margin-left: 40px;
padding-right: 70px;
}
.a-menu-right {
color: #555555;
float: right;
margin-right: 75px;
padding-left: 40px;
}
a:hover {
text-decoration: none;
color: #222211;
cursor: pointer;
}
li {
list-style-type: none;
}
@media screen and (max-width:650px) {
.menu-small {
width: 50%;
margin: 0 auto;
}
}
最佳答案
将小提琴与响应式菜单链接在一起。 https://jsfiddle.net/Dneilsen22/wvLf18we/2/
从CSS的最后一位删除宽度,然后添加float:left。尝试调整屏幕尺寸,它们应该整齐地堆叠在一起。
@media screen and (max-width:650px) {
.menu-small {
margin: 0 auto;
float:left;
}
}
关于html - 响应式导航彼此不对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36017713/