1

以下に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%;    
}
4

2 に答える 2

0

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'>

于 2012-12-07T18:40:40.433 に答える
0

2 つのドロップダウンは、両方に「float:left」プロパティを割り当てて並べて表示するため、互いに重なりません。代わりに、それらを div でラップし、その div を左にフロートさせます。

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

CSS:

.lfloat {
 float:left;
}

フォームに "float:right" プロパティを追加して、2 つのドロップダウンの下に表示されないようにしてください。

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

于 2012-12-07T18:42:13.870 に答える