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>