web-dev-qa-db-ja.com

マテリアライズCSSボタンの幅をcol s12と同じにする方法は？

[送信]ボタンの長さをその上の入力フィールドと同じにしたいのですが。

<div class="row">
     <div class="input-field col s12">
        <input id="speciality" type="text" class="validate">
            <label for="speciality">Speciality</label>
     </div>
</div>
<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Search
        <i class="material-icons right">search</i>
    </button>
</div>
htmlcsstwitter-bootstrapmaterialize
9
Pratik Saha

入力フィールドがある列が特定の幅に制限されている場合（Bootstrap列の動作方法））、列内に.btnを配置することもできます。

その後、次のCSSを使用して、幅を入力フィールドと等しくすることができます。

.col.s12 > .btn {
   width: 100%;
}

もちろん、要素としてのbuttonがこのCSSルールを曲げない場合は、代わりに<a class="btn">を使用できます。

17
ProDexorite

ボタンをcol s12クラスのdivで囲み、btn-blockをボタンに追加します。

<div class="row">
    <div class="col s12">
        <button class="btn btn-block waves-effect waves-light" type="submit" name="action">Search
            <i class="material-icons">search</i>
        </button>
    </div>
</div>

次のCSSを追加します。

.btn-block {
    width: 100%;
}
2
Mateusz