2013-04-08 53 views
0

如何使文本框和表單字段在同一行對齊...... 我給了內嵌式地顯示,但其不工作... 提供下面我的代碼.... 如何解決它...... 文本字段是一個線下的按鈕....對準在同一直線上

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> 
+5

Gah,jsFiddle關閉(至少對我來說)。那是你所有的代碼還是有CSS或JavaScript?如果是這樣,請用它更新你的問題。 – j08691 2013-04-08 19:08:11

回答

0

你的第一個insert-items-container已經100%的寬度(默認的div做的),所以它填補了整條生產線。你可以通過將文本框放在與其他表單域相同的insert-items-container或通過設置所有insert-items-container s到float: left