Material Design Lite - 导航标题栏中的搜索栏

好，所以问题是，当我加载这个 - https://codepen.io/russellharrower/pen/aZmJya你会注意到右侧与左侧不一样。我想知道我会如何去纠正这个请。Material Design Lite - 导航标题栏中的搜索栏

我需要正确的填充像左边。

 <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>

来源

2016-06-19 RussellHarrower

你的问题是目前还不清楚，你能澄清？你想让双方看起来一样，功能是一样的还是什么？ –

@ghost_dad我需要拥有与左侧相同的填充 – RussellHarrower

好吧，看起来应该是作为.mdl-layout__header-row元素更新的造型一样简单。像这样：

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

根据需要调整填充。编辑，因为我误读了，并左侧相同，而不是其他方式。这里是一个更新的Codepen：

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

来源

2016-06-19 00:24:06

Material Design Lite - 导航标题栏中的搜索栏

回答

相关问题