MaterialiseCSS - 對齊按鈕和輸入字段

Question

With materializeCSS我試圖將一個按鈕和一個輸入字段放在另一個附近（類似於default file input），如下圖所示。

但我有一個很難實現，因爲輸入字段標籤按鈕上方或領域是下面的按鈕。

<div class="row"> 
    <div class="col s12 m4 l3"> 
     <div class="file-field input-field"> 
     <button class="waves-effect waves-light btn-large" type="submit" name="action">Button 
     </button> 
     <div class="file-path-wrapper"> 
      <input id="email_input" type="text"> 
      <label for="email_input">email</label> 
     </div> 
     </div> 
    </div> 
    </div> 

http://codepen.io/anon/pen/rxKbZz

有沒有辦法實現呢？

THANK YOU

Answer 1

我也有同樣的問題，但它得到了只需添加輸入和按鍵之間的<br>標籤解決了我。

Answer 2

這個工作對我來說在材料：

<div class="filters" layout="row" layout-align="center center"> 
 
\t <md-input-container layout="row"> 
 
      <label>Enter Search Term!</label> 
 
      <input type="text"> 
 
    </md-input-container> 
 
    <md-input-container> 
 
      <label>Category</label> 
 
      <md-select ng-model="category"> 
 
      <md-option> 
 
\t \t \t \t something 
 
\t \t \t </md-option> 
 
      </md-select> 
 
    </md-input-container> 
 
    <div layout="row"> 
 
      <md-button class="md-warn"> 
 
      \t \t \t Clear 
 
      </md-button> 
 
    </div> 
 
</div>

Answer 3

在2017年對齊輸入文本和按鈕的右側代碼：

<div class="row"> 
    <form class="col s12"> 
     <div class="row"> 
      <div class="input-field col s6"> 
       <input id="name" type="text" class="validate"> 
       <label for="name">Name</label> 
      </div> 
      <div class="input-field col s6"> 
       <button class="btn waves-effect waves-light" type="submit" name="action">Go! 
       </button> 
      </div> 
     </div> 
    </form> 
</div> 

的jsfiddle here

希望有用！

Answer 4

這爲我工作：

<div class="input-field inline" style="calc(100% - 100px)"> 
    <label>Código de Barras</label> 
    <input type="text" placeholder=""> 
</div> 
<a class="btn waves-effect waves-light indigo right"> 
    <i class="material-icons">camera_alt</i> 
</a>