时间戳

首页 > 解决方案 > 如何在 Materialise 中对齐一行上的两个输入文本？

html - 如何在 Materialise 中对齐一行上的两个输入文本？

问题描述

我想在 Materialize.css 上居中两个输入文本，但是当我尝试这样做时结果并不好。那是代码：

<div class="card-content valign center">
    <div class="row">
        <form class="col s12">
            <div class="row">
                <div class="input-field col s3">
                    <input id="Valor1" type="text" class="validate" maxlength="10">
                    <label for="Valor1">Valor 1</label>
                </div>
                <div class="input-field col s3">
                    <input id="Valor2" type="text" class="validate" maxlength="10">
                    <label for="Valor2">Valor 2</label>
                </div>
            </div>
        </form>
    </div>
</div>

这里有很多文本字段，例如：Materalize Text Fields

标签： htmlcssmaterial-designmaterialize

解决方案

为了使输入居中，您可以将偏移量添加到第一列：

<div class="input-field col s3 offset-s3">
    <input id="Valor1" type="text" class="validate" maxlength="10">
    <label for="Valor1">Valor 1</label>
</div>

您的行的整个长度为 12 列。您的两个输入共有 6 列。通过左侧 3 列的偏移量，您可以获得所需的元素居中。

推荐阅读