布置HTML中的元素并使用Javascript

Question

I am quite new to JavaScript. I have been making forms here for my website and I have a very unusual problem.

I want the elements Names, Male/Female, DOB side by side..!! When I float them side by side ,give width to them, it doesn't seem to change it..!! I tried searching on Google and stackoverflow, but it isnt working here.

Let me paste the HTML and CSS code below so you people can help me out..!!

HTML Code :

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

I cannot attach the CSS code here as the page is becoming to large..!! But I have made a file which you can download here : CSS FILE or just open it in a new tab and the whole file is viewable..!!

Please Help me with this thing..!!!

YOU CAN ALSO FIND THE WORKING EXAMPLE HERE :

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

THANK YOU SO MUCH FOR YOUR TIME AND ANSWERS..!!

Answer 1

This might be what you are looking for to split the form into 2 columns:

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

The main elements are <div class="left"> and <div class="right">

In your css file put

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

Play around with it a bit.

Answer 2

Here is quick fix:

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

And remove display:block from below css class. Unlike inline elements, block elements occupy each line.

#main_body label.description {
border: none;
color: #222;
display: block;
font-size: 95%;
font-weight: 700;
line-height: 150%;
padding: 0 0 1px;
}