顶部菜单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设计

回答

相关问题