左右使用CSS浮动表单时遇到问题

Question

我在下面有一个jsfiddle：

http://jsfiddle.net/C95uc/3/

我的 css 有问题。我想在左侧显示两个下拉菜单，并且我想在右侧显示文本输入，但是我该怎么做呢？

下面是 html 代码：

<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
    </select>
    </form>
</div>


<div  class='lt-container' >
<form id='moduleExistForm'>
 <select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
    </select> </form> 
</div>

<div  id='rt-container' >
<form id='detailsForm'>

    <table>
    <tr>
    <th></th>
    <td><input type='hidden' id='idmodule' name='moduleid' value='' /> </td>
    </tr>
    <tr>
    <th>Module ID:</th>
    <td><input type='text' id='nomodule' name='moduleno' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Module Name:</th>
    <td><input type='text' id='namemodule' name='modulename' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Credits:</th>
    <td><input type='text' id='credits' name='creditsname' readonly='readonly' value=''/> </td>
    </tr>
    </table>
    <div id='moduleAlert'></div>
    </form>

    </div>

.CSS：

.lt-container, #rt-container {
 float: left;   
 }
#rt-container {
 clear: right;
 margin-left: 5%;    
}

Answer 1

http://jsfiddle.net/C95uc/4/

<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
    </select>
    </form>
<form id='moduleExistForm'>
 <select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
    </select> </form> 
</div>

两个<select>都在同一<div class='lt-container'>

Answer 2

这两个下拉列表不会堆叠在一起，因为您已经为它们分配了一个"float：left"属性，使它们并排排列。相反，将它们包裹在一个div 中，并使该div 向左浮动。

<div class="lfloat">
  <!-- Both Dropdowns -->
</div>

.CSS：

.lfloat {
 float:left;
}

请务必向窗体添加"float：right"属性，以便它不会出现在两个下拉列表下方。

示例：http://jsfiddle.net/C95uc/5/