响应式导航彼此不一致

Question

我有一个分为两个 div 的导航。一个 div 用于左侧，另一个 div 用于右侧，因为我想在它们之间的中心留出很大的空隙。所以 left nav 有 float: left;右边的有 float: right;看起来就像这样：

HOME ABOUT PORTFOLIO CONTACTS 现在，当我希望它在屏幕尺寸小于 650 像素时响应并在中心很好地相互堆叠时，会发生这种情况：它在中心居中，但 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;



 }
}

Answer 1

将小提琴与响应式菜单相关联。 https://jsfiddle.net/Dneilsen22/wvLf18we/2/

从最后一点 CSS 中删除宽度并添加 float:left。尝试调整您的屏幕尺寸，它们应该整齐地堆叠在一起。

@media screen and (max-width:650px) {
  .menu-small {
    margin: 0 auto;
    float:left;
  }
}