爲什麼我不能放置2個輸入並排

我想在jQuery模式對話框上做一個基本的設計，但現在這是一個很大的失敗。我從來沒有在CSS好，這似乎很難對我。里爾是我到目前爲止已經試過：爲什麼我不能放置2個輸入並排

模態對話框HTML：

<div class="screenSection"> 
     <div class="sectionHeader"> 
      <p>features</p> 
     </div> 
     <div class="lines"> 
      <div class="formElement"> 
       <label>overhaul</label> 
       <input type="text" name="overhaul" data-bind="value: editName"> 
      </div> 
      <div class="formElement"> 
       <label>included in the next installment</label> 
       <input type="text" name="includedNI" data-bind="value: editName"> 
      </div> 
      <div class="formElement"> 
       <label>first revision</label> 
       <input type="text" name="firstRevision" data-bind="value: editName"> 
      </div> 
      <div class="formElement"> 
       <label>last revision/ последно преразглеждане</label> 
       <input type="text" name="interestFrequency" data-bind="value: editName"> 
      </div> 
      <div class="formElement"> 
       <label> frequency ofcollection/</label>   
       <select name="frequencyOfCol" id="frequencyOfCol" data-bind="value: editName" style="width: 4em;">    
        <option>1</option> 
        <option>2</option> 
        <option>3</option>  
        <option>6</option> 
       </select> 
      </div>   
     </div> 
    </div>

而CSS：

@CHARSET "UTF-8"; 

.formElement { height: 30px; float: left; height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; } 
.formElement label { width: 17.89em; margin: 0.8em 0 0.1em 0.15em; font-size: 1.7em; display: block; } 
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; } 
.formElement span { font-size: 1.05em; font-weight: bold; } 
.lines { overflow: hidden; } 
#commentInformation .formElement { width: 80%; } 
input[type="text"] { float: left; border: 1px solid #CCCCCC; padding: 0.2em; height: 1.6em; width: 29.4em; } 
fileSelection { width: 50em; height: 30px; } 
td 
{ 
    background: #A9D0F5; 
    text-align: center; 
    height:2em; 
} 
th 
{ 
    height:2em; 
} 
table 
{ 
    width: 98%; 
    font-size: 1.2em; 
    clear: both; 
}

Full Jsfiddle here

請幫我把並排的輸入側。我已經在這個問題上失去了3個多小時。我確信我錯過了一些非常小的東西，但作爲初學者，我無法發現它。

來源

2013-07-16 Slim

你爲什麼不使用表formElement –

更新CSS

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;} 
.formElement label { font-size: 10px; width: 100%; min-width: 150px; display: inline-block; } 
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; } 
.formElement span { font-size: 1.05em; font-weight: bold; } 
.lines { overflow: hidden; } 
#commentInformation .formElement { width: 80%; } 
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 15px; width: 150px } 
fileSelection { width: 50em; height: 30px; }

jsfiddle

來源

2013-07-16 13:14:47

的50％看起來不錯，但我想以實現其他目的，因爲屏幕將包含大量輸入。請檢查我的帖子，我已更新它。順便說一句，你的答案是現在最好的！ – Slim

我更新了css文件。你想要什麼？ –

正是！非常感謝您的幫助！您真的爲我節省了很多時間和精力！再次感謝！ – Slim

設置寬度相等的兩個div ....這向左浮動....

來源

2013-07-16 12:11:12 crazyarun

在你的CSS刪除text-align:center;和修改

<td align="center"> 
    <button data-bind="click: $root.editProduct">Edit</button> 
</td>

到

<td align="right"> 
    <button data-bind="click: $root.editProduct">Edit</button> 
</td>

而且

<td align="center"> 
    <button data-bind="click: $root.removeProduct">Delete</button> 
</td>

到

<td align="left"> 
    <button data-bind="click: $root.removeProduct">Delete</button> 
</td>

來源

2013-07-16 12:36:11

您要通過邊放邊的div給寬度（小於50％）和float：左。例如： .formElement { float:left; width:40%;}

來源

2013-07-16 12:40:20 noob

寬度= <父DIV – noob

爲什麼我不能放置2個輸入並排

回答

相關問題