javascript - MDL-菜单右下角离屏

Question

嗨，我试图让以下代码显示在导航栏的右侧，但是当我这样做时，它只显示一半(换句话说，菜单的一半是正确的:-32px; - 我还没有添加任何 CSS(这是默认的 Material Design 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-textfield(否则它会搞砸一切，所以之前的div的#id)

Answer 1

菜单ul中的

mdl-menu--bottom-left到mdl-menu--bottom-right

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>