0

私はJavaScriptが初めてです。ここで自分のウェブサイト用のフォームを作成していますが、非常に珍しい問題があります。

私は要素の名前、男性/女性、生年月日を並べて欲しい..!! 並べて浮かせて幅を持たせても変わらないようです..!! Google と stackoverflow で検索してみましたが、ここでは機能しません。

HTML と CSS のコードを下に貼り付けて、助けてください..!!

HTML コード : 

    <div id="form_container" class="WarpShadow WLarge WNormal">

        <img src = "header.png" width="100%" />
        <form id="form_3" class="appnitro top_label"  method="post" data-highlightcolor="#f5d678" action="#main_body">
                    <div class="form_description">
            <h2>SWIM TEAM REGISTRATION FEES</h2>
            <p>(One check can be written for all children including any required fees for Junior Memberships.)</p>
        </div>                        
            <ul >
                        <li id="pagination_header" class="li_pagination">
             <table class="ap_table_pagination" width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                  <td align="center"><span id="page_num_1" class="ap_tp_num ap_tp_num_active">1</span><span id="page_title_1" class="ap_tp_text ap_tp_text_active">Fees</span></td><td align="center" class="ap_tp_arrow">&gt;</td>
<td align="center"><span id="page_num_2" class="ap_tp_num">2</span><span id="page_title_2" class="ap_tp_text">Registration</span></td><td align="center" class="ap_tp_arrow">&gt;</td>
<td align="center"><span id="page_num_3" class="ap_tp_num">3</span><span id="page_title_3" class="ap_tp_text">Release</span></td><td align="center" class="ap_tp_arrow">&gt;</td><td align="center"><span id="page_num_4" class="ap_tp_num">4</span><span id="page_title_4" class="ap_tp_text">Payment</span></td>
              </tr>
            </table>
        <li id="li_2" >
        <label class="description" for="element_2"><input type="checkbox"> $120 for 1st child </label>
        </li>        
        <li id="li_3" >
        <label class="description" for="element_2"><input type="checkbox"> $110 for 2nd child </label>
        </li>    
        <div id="moveleft">    
        <li id="li_4" >
        <label class="description4" for="element_2">Names </label>
        <input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value="">
        </li>
        <li id="li_5">
            <div>
                <label class="description5" for="element_5">Male / Female</label>
                <select class="element select small" id="element_5" name="element_5"> 
                <option value="" selected="selected"></option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                </select>
            </div> 
        </li>
        <li id="li_8" class="date_field">
        <label class="description">DOB </label>
        <span class="date_mm">
            <input id="element_8_1" name="element_8_1" class="element text" size="2" maxlength="2" value="" type="text" /> /
            <label for="element_8_1">MM</label>
        </span>
        <span class="date_dd">
            <input id="element_8_2" name="element_8_2" class="element text" size="2" maxlength="2" value="" type="text" /> /
            <label for="element_8_2">DD</label>
        </span>
        <span class="date_yyyy">
             <input id="element_8_3" name="element_8_3" class="element text" size="4" maxlength="4" value="" type="text" />
            <label for="element_8_3">YYYY</label>
        </span>
            </div>

        </li>

ページが大きくなりすぎて、ここにCSSコードを添付できません..!! しかし、ここからダウンロードできるファイルを作成しました：CSS FILEまたは新しいタブで開くだけで、ファイル全体が表示されます..!!

このことで私を助けてください.. !!!

また、ここで作業例を見つけることができます:

http://www.ankitsuryawanshi.in/projects/form/form1/form.html

お時間とご回答ありがとうございます..!!

4

2 に答える 2

1

これは、フォームを2つの列に分割するために探しているものである可能性があります。

<li>
<div class="left"><label class="description4" for="element_2">Names </label></div>
<div class="right"><input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value=""></div>
</li>

<div class="left">主な要素は<div class="right">

あなたのcssファイルに入れてください

.left{float:left;}
.right{float:right;}

少し遊んでみてください。

于 2013-03-13T07:23:36.467 に答える
0

ここに簡単な修正があります：

<li id="li_4" style="">
<label class="description" for="element_2">Names </label>
<input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value="">
<label class="description" for="element_5">Male / Female</label>
<select class="element select small" id="element_5" name="element_5"> 
<option value="" selected="selected"></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</li>

display:blockcss クラスの下から削除します。インライン要素とは異なり、ブロック要素は各行を占有します。

#main_body label.description {
border: none;
color: #222;
display: block;
font-size: 95%;
font-weight: 700;
line-height: 150%;
padding: 0 0 1px;
}
于 2013-03-13T06:25:39.087 に答える