Evenlly separeted DIV的技術不起作用

幾天前，我找到了自己的東西，我從來沒有想過，但繼續reserach解決它。Evenlly separeted DIV的技術不起作用

我有一個菜單，裏面有我的物品。我想要這些項目來填充其父項的整個寬度;我找到了一些解決方案，包括這些中的一個（我個人認爲是最簡單的，並且不使用任何黑客做的工作）：

HTML

<div id="menu"> 
    <a href="#"><div class="menu_item">Item 1</div></a> 
    <a href="#"><div class="menu_item">Item 2</div></a> 
    <a href="#"><div class="menu_item">Item 3</div></a> 
</div>

CSS

div#menu { 
    display:flex; 
    justify-content:space-between; 
} 
div.menu_item { 
    white-space:nowrap; 
}

我發現它的地方，JSFiddle甚至還有一個可用的例子。我創建了一個新的空白文檔，並在那裏嘗試過，並且工作。但是，不幸的是，這在我的已經完整的網站中不起作用。我想過很多事情：我的標籤是繼承屬性，以前的屬性之間可能會有衝突，還有更多。我已經測試了他們，但仍然沒有。我還沒有做的唯一事情是從頭開始（出於顯而易見的原因）。

所以，我的問題是，你有什麼想法可能發生什麼？什麼都可以？

PS：我在本地PC上嘗試過所有這些，但網站已經在線。如果你想查看它：http://geesufmg.com（只是要清楚，我試圖在這裏按鈕「Home」，「Engenharia de sistemas」，「Sobre o curso」等， - 容器是div＃菜單和項目是div.menu_item）。

從現在開始，感謝您的任何幫助。

來源

2015-01-07 LVilasBoas

還是能夠工作，你只需要將其添加到您的a標籤的母公司是div.container在您的實際代碼，而不是div#menu：

div.container{ 
    display:flex; 
    justify-content:space-between; 
} 

div.menu_item { 
    white-space:nowrap; 
}

UPDATE

在你的代碼的進一步檢查問題是你在多個地方使用.container（這很好，因爲它是一個class，但添加這些屬性將影響其他地方）。你需要的目標.container特定的標識符下（在這種情況下#menu）：

#menu .container{ 
    display:flex; 
    justify-content:space-between;  
} 

#menu .container a{ 
    white-space:nowrap; 
}

FIDDLE

來源

2015-01-07 01:35:39 jmore009

jmore009，感謝對您的答案，但我試過（治療「DIV＃菜單」爲「div.container '和'div＃menu a'as'div.item'）和（'div＃menu a'as'div.container'and'div.menu_item'as'div.menu_item'）;分別沒有任何事情發生，並且每個菜單項都放在一行中（不再內聯），而它的鏈接佔據了整行。 – LVilasBoas

@LVilasBoas更新了我的回答 – jmore009

就是這樣！它總是這些細節，我們只是看不到......我只是忘了我在div＃菜單裏有另一個DIV ... 非常感謝您的幫助。我的問題解決了。 – LVilasBoas

Evenlly separeted DIV的技術不起作用

回答

相關問題