Question

如何使文本框和表单字段在同一行中对齐... 我给内联显示但它不工作...... 在下面提供我的代码.... 如何解决它... 文本字段是按钮下方的一行....

http://jsfiddle.net/S9PYV/embedded/result/

<div class="bs-docs-example" id="notesDocumentsOuterDF">        
    <div class="documents-make-container">
        <!--<div class="insert-items-container">
            <label for="idName">Name</label>
            <input id="idName" type="text" name="name" value="" required="required" />
        </div>-->

        <div class="insert-items-container">
            <select class="greenButton">
                <option value="volvo">Create</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>

            <select class="greenButton">
                <option value="volvo">Email|Access</option>
                <option value="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>

            <input type="submit" class="greenButton" value="Add Contacts">
        </div>

        <div class="insert-items-container" style="float: right;">
            <!--<label for="idImageUpload">Image</label>-->
            <input type="file" name="file" id="idImageUpload" class="file" size="40">
            <div id="fakefile" class="fakefile">
                <input type="text" class="fakeinput">
                <img src="/images/icons/search.png">
            </div>
        </div>

        <!--<div class="insert-items-container">
            <label for="idContactSel">Contacts List</label>
            <select id="idContactSel" name="contactselect">
                <option value="">select email to share </option>
            </select>                               
            <input id="shareListBtn" class="greenButton" type="button" value="Share List" alt="sharelist">
            <input id="contactListBtn" class="greenButton" type="button" value="Contacts List" alt="contactlist">
            <input id="AddContactBtn" class="greenButton" type="button" value="Add Contacts" alt="addcontacts">
        </div>-->

        <!--<div class="insert-items-container">
            <label for="idShareList">Share List</label>
            <div id="idShareList" class="email-selected-container">
                <table cellspacing="0" cellpadding="0" border="0" class="table">
                    <thead>
                        <tr class="documentsListHeading" role="row">
                            <th width="100px;">name</th>
                            <th width="180px;">Email</th>
                            <th>Permission</th>
                        </tr>
                    </thead>
                    <!-- share list -->
            </div>
        </div>

Answer 1

你的第一个insert-items-container有100％宽度（默认为div），所以它填满整行。您可以将文本框与其他表单字段放在同一insert-items-container中，或将所有insert-items-container设置为float: left

来解决此问题。

对齐在同一行

1 个答案: