Question

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

有没有办法实现它？

谢谢你

Answer 1

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 2

只需将“ input-field”类添加到您的输入和按钮容器中

Answer 3

我也有同样的问题但是通过在输入和按钮之间添加dispatchEvent标记来解决它。

Answer 4

这对我来说很有用：

＆＃13;

<div class="filters" layout="row" layout-align="center center">
	<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>
				something
			</md-option>
          </md-select>
    </md-input-container>
    <div layout="row">
          <md-button class="md-warn">
          			 Clear
          </md-button>
    </div>
</div>

＆＃13;

Answer 5

这对我有用：

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

Answer 6

好的代码。

<div class="row">
                                    <form class="col s12">
                                        <div class="row">
                                            <div class="input-field col s12 m4 l3 offset-l4">
                                                <input id="name" type="text" class="validate">
                                                <label for="name" class="white-text">Busque número de pagina...</label>
                                            </div>
                                            <div class="input-field col s12 m4 l1">
                                                <button class="btn-large waves-effect waves-light grey darken-4" type="submit"><i class="material-icons">search</i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

Answer 7

输入v中的按钮浮动：

<div class="row">
                                    <div class="input-field col l4 offset-l4">
                                        <input type="text" name="txtBusPag" id="txtBusPag" class="yellow-text"/>
                                        <label for="txtBusPag" class="white-text lighten-5"><button type="submit" class="btn-small grey darken-4 waves-effect waves-teal white-text"><i class="material-icons">search</i></button></label>
                                    </div>
                                </div>

MaterialiseCSS - 对齐按钮和输入字段

7 个答案: