響應式導航不彼此對齊

我有一個導航分爲兩個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

響應式導航不彼此對齊

回答

相關問題