对齐表格行

时间:2018-01-09 15:18:12

标签: html material-design

我使用Materialise设计购买了一个主题,我希望我的表单看起来像这样:

The form what it currently looks like

到目前为止还可以。但是,如果仔细观察,您会注意到两个(主要形式)列之间的差距。这是HTML:

<form role="form" method="POST" action="{{ route('company.register') }}">
                {{ csrf_field() }}
                <div class="row">
                    <div class="input-field col s6">
                        <select name="legal_form" id="legal_form" class="basic-select" onchange="changeLegalForm()">
                            <option value="" disabled="disabled" selected="selected">Bitte wählen Sie eine Rechtsform
                            </option>
                            <option value="1">Selbstständiger</option>
                            <option value="2">Einzelunternehmer</option>
                            <option value="3">Personengesellschaft (GbR/OHG/KG)</option>
                            <option value="4">Kapitalgesellschaft (GmbH/UG/Ltd./...)</option>
                            <option value="5">Verein</option>
                        </select>
                        <label for="legal_form">Rechtsform</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="company_name" id="company_name" placeholder="Unternehmensname"
                               class="validate" required>
                        <label for="company_name" class="active">Unternehmensname</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="email" name="email" id="email" placeholder="E-Mail-Adresse" class="validate"
                               required>
                        <label for="email" class="active">E-Mail-Adresse</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="checkbox" id="sbr" name="sbr">
                        <label for="sbr">Kleinunternehmerregelung</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="address" id="address" placeholder="Anschrift" class="validate"
                               required>
                        <label for="address" class="active">Anschrift</label>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="zip" id="zip" pattern="[0-9]{5}" placeholder="Postleitzahl"
                                   class="validate" required>
                            <label for="zip" class="active">Postleitzahl</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="text" name="city" id="city" placeholder="Stadt" class="validate">
                            <label for="city" class="active">Stadt</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="phone" id="phone" placeholder="Telefonnummer" class="validate"
                               required>
                        <label for="phone" class="active">Telefonnummer</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="fax" id="fax" placeholder="Telefaxnummer" class="validate">
                        <label for="fax" class="active">Telefaxnummer</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="bank_name" id="bank_name" placeholder="Name der Bank"
                               class="validate" required>
                        <label for="bank_name" class="active">Name der Bank</label>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s8">
                            <input type="text" name="iban" id="iban" placeholder="IBAN" class="validate" required>
                            <label for="iban" class="active">IBAN</label>
                        </div>
                        <div class="input-field col s4">
                            <input type="text" name="bic" id="bic" placeholder="BIC" class="validate" required>
                            <label for="bic" class="active">BIC</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="crn" id="crn" placeholder="Handelsregister-Nr."
                                   class="validate">
                            <label for="crn" class="active">Handelsregister-Nr.</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="text" name="vat_id" id="vat_id" placeholder="Umsatzsteuer-ID"
                                   class="validate">
                            <label for="vat_id" class="active">Umsatzsteuer-ID</label>
                        </div>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="tax_id" id="tax_id" pattern="[0-9]{11}"
                                   placeholder="Steuernummer" class="validate" required>
                            <label for="tax_id" class="active">Steuernummer</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="number" name="tax_rate" id="tax_rate" placeholder="Steuerrate" value="19"
                                   class="validate" required>
                            <label for="tax_rate" class="active">Steuerrate</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="district_court" id="district_court" placeholder="Registergericht"
                               class="validate" required>
                        <label for="district_court" class="active">Registergericht</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="executives" id="executives" placeholder="Geschäftsführer"
                               class="validate" required>
                        <label for="executives" class="active">Geschäftsführer</label>
                    </div>
                </div>
                <div class="row" style="text-align: right;">
                    <button type="submit" class="waves-effect waves-light btn"><i
                                class="material-icons right">done</i>Überprüfen und fertigstellen
                    </button>
                </div>
            </form>

我尝试了各种div classes,但没有一个有效。什么是背后的魔力?

1 个答案:

答案 0 :(得分:0)

您可以使用班级right按钮。

Forge Admin模板是使用materialcss开发的。

请参阅此对齐/助手类详细信息:http://hexesis.com/forge/dark/pages/materialize-helper.html

您可以浏览我们的文档/实时演示链接,以便更好地了解Materialcss。这很简单。