MDL菜單右下角

Question

嗨我想獲得下面的代碼顯示在導航欄的右側，但是當我這樣做只顯示一半（換句話說一半的菜單是正確的：-32px ; - 我沒有添加任何CSS，這是默認的材料設計lite代碼）。

---

---

錯誤在我的CSS https://codepen.io/russellharrower/pen/RgMJaR

我的核心getmdl

<link rel="stylesheet" href="https://getmdl.io/assets/components.css"> 
<script src="https://getmdl.io/assets/components.js"></script> 
<script src="//code.getmdl.io/1.3.0/material.min.js"></script> 

HTML代碼

  <div class="mdl-layout__header-row"> 
       <!-- Title --> 
       <span class="mdl-layout-title">SITE</span></span> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
        <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
         <i class="material-icons">search</i> 
        </label> 
        <div class="mdl-textfield__expandable-holder"> 
         <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
        </div> 
       </div> 

       <!-- MDL bottom right Aligned Menu Button --> 
      <button id="my-menu-bottom-right" 
        class="mdl-button mdl-js-button mdl-button--icon"> 
       <i class="material-icons">share</i> 
      </button> 

      <!-- Menu items List , mdl-menu--bottom-right --> 

      <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
       for="my-menu-bottom-right"> 
       <li class="mdl-menu__item">Facebook</li> 
       <li class="mdl-menu__item">Twitter</li> 
       <li disabled class="mdl-menu__item">Google Plus</li> 
      </ul> 

      </div> 

     </header> 

這裏是自動生成的CSS我不知道什麼代碼生成這個或爲什麼。

element.style { 
    right: -35.1563px; 
    top: 40px; 
    width: 124px; 
    height: 160px; 
} 

---

誤差

.mdl-textfield{width:100% !important;} 

，所以我需要的款式，但不給它一個全球.mdl文件，文本框（否則螺絲一切行動的div所以#ID之前）

Answer 1

mdl-menu--bottom-left到mdl-menu--bottom-right菜單ul

https://codepen.io/anon/pen/wemXBe

<header class="mdl-layout__header"> 

      <div class="mdl-layout__header-row"> 
       <!-- Title --> 
       <span class="mdl-layout-title">SITE</span></span> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
        <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
         <i class="material-icons">search</i> 
        </label> 
        <div class="mdl-textfield__expandable-holder"> 
         <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
        </div> 
       </div> 

       <!-- MDL bottom right Aligned Menu Button --> 
       <button id="my-menu-bottom-left" 
         class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">share</i> 
       </button> 

       <!-- Menu items List , mdl-menu--bottom-right --> 
       <!-- mdl-menu--bottom-left to mdl-menu--bottom-right --> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
        for="my-menu-bottom-left"> 
        <li class="mdl-menu__item">Facebook</li> 
        <li class="mdl-menu__item">Twitter</li> 
        <li disabled class="mdl-menu__item">Google Plus</li> 
       </ul> 

      </div> 

     </header>