Material Design Lite - 导航中的搜索栏 header

Question

好的，问题是当我加载它时 - https://codepen.io/russellharrower/pen/aZmJya您会注意到右侧与左侧不同。我想知道我将如何着手纠正这个问题。

我需要右边的填充与左边的一样。

        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">IPET</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>

        <button id="demo-menu-lower-right"
                class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
          <i class="material-icons">chat</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right"
            for="demo-menu-lower-right">
          <li class="mdl-menu__item">Some Action</li>
          <li class="mdl-menu__item">Another Action</li>
          <li disabled class="mdl-menu__item">Disabled Action</li>
          <li class="mdl-menu__item">Yet Another Action</li>
        </ul>
            </div>

        </div>

    </header>

Answer 1

好的，看起来应该像更新 .mdl-layout__header-row 元素的样式一样简单。像这样：

.mdl-layout__header-row {
  padding: 0 80px 0 80px;
}

根据需要调整填充。编辑，因为我误读并使左与右相同而不是相反。这是一个更新的 Codepen：

https://codepen.io/thecox/pen/ezdveV

Material Design Lite - 导航中的搜索栏 header

Material Design Lite - Search bar in Nav header

css

material-design-lite