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 - 導航標題欄中的搜索欄

回答

相關問題