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 文件或只是在新选项卡中打开它，整个文件都可以查看..！！

请帮我解决这个问题..!!!

您还可以在此处找到工作示例：

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:block从下面的 css 类中删除。与行内元素不同，块元素占据每一行。

#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 回答