响应式导航不彼此对齐

我有一个导航分为两个div。左边一格，右边另一格，因为我想在他们之间的中心留下很大的差距。所以左导航已浮动：左;右边有浮动：右边;并且，看起来就像是：当我想它是响应并互相在中心很好地堆一旦屏幕变得小于650像素大小响应式导航不彼此对齐

HOME ABOUT PORTFOLIO CONTACTS 现在，这是发生了什么：它在中心中心，但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; 



} 
}

来源

2016-03-15 Limpuls

链接的摆弄着一个负责任的菜单。 https://jsfiddle.net/Dneilsen22/wvLf18we/2/

删除CSS的最后一位的宽度并添加float：left。尝试调整您的屏幕大小，他们应该堆叠整齐地在另一个之上。

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

来源

2016-03-15 17:33:35 Danielson

那么，它仍然无法正常工作..我可以删除float的属性：right;从右菜单使用JS的div，但希望它只在CSS做。 – Limpuls

因此，而不是浮动：左;我写了float：right;现在它们彼此整齐堆叠，但只能放在页面的右侧。现在我需要弄清楚如何将它们放置在中心位置，不能使用margin：0 auto;和float：none;不起作用。有任何想法吗？ – Limpuls

我创建了一个[小提琴]（https://jsfiddle.net/Dneilsen22/wvLf18we/），应该是你正在寻找的。也许我不理解原来的问题，但我们只使用CSS。 – Danielson

响应式导航不彼此对齐

回答

相关问题