最大寬度的MDDL菜單無法正常工作

如果爲mdl-layout__header-row類設置了max-width屬性，則下拉菜單無法正常工作，它們未對齊。刪除最大寬度屬性，一切正常。最大寬度的MDDL菜單無法正常工作

代碼：

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
     <title>Test Page</title> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" /> 
     <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
    </head> 
    <body> 
     <header class="mdl-layout__header"> 
      <div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto;"> 
       <a href="/"> 
        <img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" /> 
       </a> 
       <span>Logo</span> 
       <button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">arrow_drop_down</i> 
       </button> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT"> 
        <li class="mdl-menu__item">One</li> 
        <li class="mdl-menu__item">Two</li> 
        <li class="mdl-menu__item">Three</li> 
       </ul> 
       <button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">arrow_drop_down</i> 
       </button> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT"> 
        <li class="mdl-menu__item">One</li> 
        <li class="mdl-menu__item">Two</li> 
        <li class="mdl-menu__item">Three</li> 
       </ul> 
      </div> 
     </header> 
    </body> 
</html>

來源

2017-02-26 RAGHU RAMAN

添加position:relative。這會阻止.mdl-layout__header-row div中定位的元素偏離行。當使用絕對定位來定位元素時，您需要設置一個父容器來將它們放置在關閉位置，並通過爲它們設置position:relative來實現這一點 - 否則它將位於最外面的html元素/文檔位置。

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
     <title>Test Page</title> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" /> 
     <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
    </head> 
    <body> 
     <header class="mdl-layout__header"> 
      <div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto; position:relative;"> 
       <a href="/"> 
        <img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" /> 
       </a> 
       <span>Logo</span> 
       <button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">arrow_drop_down</i> 
       </button> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT"> 
        <li class="mdl-menu__item">One</li> 
        <li class="mdl-menu__item">Two</li> 
        <li class="mdl-menu__item">Three</li> 
       </ul> 
       <button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">arrow_drop_down</i> 
       </button> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT"> 
        <li class="mdl-menu__item">One</li> 
        <li class="mdl-menu__item">Two</li> 
        <li class="mdl-menu__item">Three</li> 
       </ul> 
      </div> 
     </header> 
    </body> 
</html>

來源

2017-02-26 12:10:56

謝謝你，這工作！ –

完全沒問題！ –

似乎你對mdl有很好的體驗。如果你能幫我解決這個問題，那就太好了：http://stackoverflow.com/questions/42471799/turn-off-transition-effects-in-mdl –

最大寬度的MDDL菜單無法正常工作

回答

相關問題