頂部菜單CSS設計

我想要一個頂部的菜單欄，但我失敗了使用float: left。如何獲得頂部菜單欄的正確行爲（在小部件中提到）？頂部菜單CSS設計

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; } 
 
     #left {background-color: green; width: 200px; } 
 
     #mid { background-color: red; width: 40%; float: left; } 
 
     #right {background-color: blue; float: left; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

來源

2016-04-25 Basj

我想這是你想要做什麼。我用CSS flexbox，這很容易。

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; display: flex; } 
 
     #left {background-color: green; flex: 0 0 200px; } 
 
     #mid { background-color: red; flex: 0 0 40%; } 
 
     #right {background-color: blue; flex: 1; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

如果您需要傳統支持，那麼你只需要正確應用彩車：

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; } 
 
     #left {background-color: green; float: left; width: 200px; } 
 
     #mid { background-color: red; float: left; width: 40%; } 
 
     #right {background-color: blue; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

來源

2016-04-25 19:22:58 Quantastical

都能跟得上....不'彎曲：1'上所有div ......剛剛過去的一個。 –

@Paulie_D感謝您的澄清。感謝您確保準確答案的時間和精力。 – Quantastical

@Quantastical奇怪的是'flex＆...對於iPad的Chrome＆Safari（甚至是最近的版本）的支持很差。例如，這裏是一個問題，我得到http://stackoverflow.com/questions/36877321/display-flex-doesnt-work-on-ipad-both-chrome-and-safari你有什麼想法如何解決這個問題？ – Basj

Flexbox，就可以做到這一點。

使用正確的柔性屬性以便限制寬度的div不會展開非常重要。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#menu { 
 
    background-color: yellow; 
 
    display: flex; 
 
} 
 
#left { 
 
    background-color: green; 
 
    flex: 0 0 200px; 
 
} 
 
#mid { 
 
    background-color: red; 
 
    flex: 0 0 40%; 
 
} 
 
#right { 
 
    background-color: blue; 
 
    flex: 1; 
 
}

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
</div> 
 
<div> 
 
    content of the site 
 
</div>

來源

2016-04-25 19:26:32

酷！從未聽說過flex！人們在flex之前是如何做的？（我認爲例如bootstrap不使用flex）。 – Basj

@Basj Bootstrap 4正在向Flex IIRC轉型。以前，他們在做花車。 – Quantastical

我在iPad上試過，看起來''flex'在iPad和Chrome瀏覽器（甚至是最新版本）上的支持並不好。你的代碼不能在這種設備上渲染。如果您有想法，我爲此創建了一個問題？ http://stackoverflow.com/questions/36877321/display-flex-doesnt-work-on-ipad-both-chrome-and-safari – Basj

頂部菜單CSS設計

回答

相關問題