顶部菜单 CSS 设计答案

【问题标题】：Top menu CSS design顶部菜单 CSS 设计
【发布时间】：2016-08-19 08:32:22
【问题描述】：

我正在尝试创建顶部菜单栏，但使用 float: left 失败。如何为 顶部菜单栏 提供正确的行为（在小部件本身中提到）？

      * { 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>

【问题讨论】：

标签： css user-interface menu

【解决方案1】：

我认为这就是你想要做的。我使用了 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>

【讨论】：

@Paulie_D 感谢您的澄清。感谢您为确保准确答案所付出的时间和精力。
@Quantastical 奇怪的是，flex 在... Chrome 和 Safari for iPad（甚至是最新版本）上受到严重支持。例如这里有一个问题我得到stackoverflow.com/questions/36877321/…你知道如何解决这个问题吗？
@Basj, flex 在 iOS Safari 回到版本 7 中得到支持，但需要供应商前缀。您是否也添加了-webkit-flex（以及其他供应商特定的属性）？

【解决方案2】：

Flexbox 可以做到这一点。

使用正确的 flex 属性很重要，这样有限宽度的 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>

【讨论】：

酷！以前从未听说过弹性！ flex之前人们是怎么做的？（我认为例如 bootstrap 不使用 flex）。
@Basj Bootstrap 4 正在迁移到 flex IIRC。以前，他们在做花车。
我在 iPad 上尝试过，但似乎 flex 在 iPad 版 Chrome 和 Safari 上没有得到很好的支持（即使是最新版本）。您的代码在此类设备上呈现的效果不是很好。如果您有想法，我为此创建了一个问题？ stackoverflow.com/questions/36877321/…
我没有为此添加前缀，而 Safari / iOS 确实需要，因此您必须适应。 - caniuse.com/#search=flexbox 所以 Safari 确实支持 flexbox 并且已经支持了几个版本。