javascript - 在 HTML 中排列元素并使用 Javascript

Question

我对 JavaScript 很陌生。我一直在这里为我的网站制作表格，但遇到了一个非常不寻常的问题。

我想要元素名称、男性/女性、出生日期并排..!!当我并排 float 它们时，给它们宽度，它似乎没有改变..!!我尝试在 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

非常感谢您的时间和答复..!!

Answer 1

这可能是您要将表单分成两列的原因:

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

尝试一下。