Question

我有一个简单的html表示例，但它无法正确显示，我不明白为什么。

表的代码：

<div class="container">
    <form id="testform" data-parsley-validate>
    <div class="row">
        <input class="form-control typeahead" name="customerSearch" type="text"
               placeholder="Customer Search:" autofocus="on"
               autocomplete="off" spellcheck="off" data-open="open" data-close="close" 
               data-select="select" data-autocomplete="autocomplete"
               data-source="customersTypeAhead"/>       

        <button type="button" class="btn btn-warning">Clear</button>
        <button type="button" class="btn btn-success">Create</button>

    </div>
    <div class="row">
        <div class="col-md-4 smPadding">
            <br>
            <!-- Customr Contact info and factoring company info -->
            <input class="form-control box-size" type="text" name="customerName" placeholder="Customer:"
                data-parsley-trigger="change" minlength="6" required />
            <input class="form-control  box-size" type="text" name="customerAddress" placeholder="Address:"
                data-parsley-trigger="change" minlength="6" required />

            <table>
                <tr>
                    <td>
                        <input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:"  />
                    </td>
                    <td>
                        <input class="form-control box-size" type="text" name="customerCity" placeholder="City:"
                            data-parsley-trigger="change" minlength="3"  required />        
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:"
                            data-parsley-trigger="change" minlength="2" maxlength="2" required />
                    </td>
                    <td>
                        <input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:"
                            data-parsley-trigger="change" minlength="5" required />                 
                    </td>
                </tr>
            </table>

            <input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:"
                data-parsley-trigger="change"  minlength="10" required />

            <input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:"
                data-parsley-trigger="change"  minlength="10"/>

            <input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:"
                data-parsley-trigger="change" minlength="10"/>      

            <input type="checkbox" name="customerFactorInvoices"  {{isFactoredCheckAnswer}}> Does Company Use Invoice Factoring?<br>

            {{#if isFactoredCheck}}
                <input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:"
                    data-parsley-trigger="change"  minlength="6" {{factorRequired}}/>

                <input class="form-control  box-size" type="text" name="factoringAddress" placeholder="Address:"
                    data-parsley-trigger="change"  minlength="6" {{factorRequired}}/>

                <table>
                    <tr>
                        <td>
                            <input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:"
                                data-parsley-trigger="change"  />
                        </td>
                        <td>
                            <input class="form-control box-size" type="text" name="factoringCity" placeholder="City:"
                                data-parsley-trigger="change" minlength="3" {{factorRequired}} />       
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:"
                                data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} />
                        </td>
                        <td>
                            <input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:"
                                data-parsley-trigger="change" minlength="5" {{factorRequired}} />                   
                        </td>
                    </tr>
                </table>

                <input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:"
                    data-parsley-trigger="change" minlength="10" />

                <input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:"
                    data-parsley-trigger="change"  minlength="10"/>

                <input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:"
                    data-parsley-trigger="change"  minlength="10"/>         

                <input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:"
                    data-parsley-trigger="change"    /> 
            {{/if}}
        </div>

        <div class="col-md-4 smPadding">
            <br>
            <input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:"
                data-parsley-trigger="change" required />   
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles1" value="onOrderCreate">On Order Create
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles1" value="onPuDel" > On Pick/Del
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles1" value="invoicing"> Invoicing
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles1" value="accountsPayable" > Accounts Payable
                    </td>
                </tr>
            </table>
            <br>
            <input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:"
                data-parsley-trigger="change" required />   
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles2" value="onOrderCreate">On Order Create
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles2" value="onPuDel" > On Pick/Del
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles2" value="invoicing"> Invoicing
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles2" value="accountsPayable" > Accounts Payable
                    </td>
                </tr>
            </table>
            <br>
            <input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3"
                data-parsley-trigger="change" required />   
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
                    </td>
                </tr>
            </table>
            <br>
            <input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:"
                data-parsley-trigger="change" required />   
            <table>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles4" value="onOrderCreate">On Order Create
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles4" value="onPuDel" > On Pick/Del
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="emailRoles4" value="invoicing"> Invoicing
                    </td>
                    <td>
                        <input type="checkbox" name="emailRoles4" value="accountsPayable" > Accounts Payable
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-4 smPadding">
            <br>
            <input type="checkbox" name="customerOriginalInvoices" value="true" > Customer Require Original Invoices<br>
            <input type="checkbox" name="customerAccountHold" value="true" > Account on Hold<br>
        </div>  
    </div>
    </form> 
</div>

我被要求放入的CSS

th, td {
  width: 50%;
  text-align: left;
}

问题的图片。

完整表单的Picutre显示文本框与表格代码正确排列。

应用上述css后的图片。似乎使情况变得更糟。

所以，如果你能告诉我这里做错了什么，我将不胜感激。

Answer 1

这是对div布局进行一些研究后的正确方法。

<div class="row">
                <div class="col-md-6">
                    <input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create<br>
                    <input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
                </div>
                <div class="col-md-6">
                    <input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing<br>
                    <input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
                </div>
            </div>

为什么我的HTML表格无法正确显示

1 个答案: