安排HTML中的元素和使用Javascript

Question

我對JavaScript很陌生。 我一直在爲我的網站製作表格，我有一個非常不尋常的問題。

我想要的元素名稱，男性/女性，肩並肩......。 當我把它們並排放在一起時，給它們一個寬度，它似乎沒有改變它.. !! 我試着在谷歌和計算器上搜索，但它不在這裏工作。

讓我粘貼下面的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

謝謝你這麼多，你的時間和解答.. !!

Answer 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;} 

玩一下吧。

Answer 2

這裏是速戰速決：

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

並從以下CSS類中刪除display:block。與內聯元素不同，塊元素佔據每一行。

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