Question

您好我试图让以下代码显示在导航栏的右侧但是当我这样做时只显示一半（换句话说，一半菜单是正确的：-32px; - 我还没有添加任何CSS这是默认的材料设计精简代码。）

错误在我的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（否则它会把所有内容都搞砸，所以之前的#id of div）

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>

MDL菜单在屏幕右下方

1 个答案: