css - 顶部菜单CSS设计

Question

我想有一个顶部菜单栏，但我使用 float: left 失败了。如何为 top menu bar 提供正确的行为(在小部件本身中提到)？

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

Answer 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>

如果您需要遗留支持，那么您只需要正确应用 float :

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