【问题标题】: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 并且已经支持了几个版本。
    猜你喜欢
    • 2012-12-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-13
    • 1970-01-01
    相关资源
    最近更新 更多