Question

我是JavaScript新手。我一直在为我的网站制作表格，我有一个非常不寻常的问题。

我希望元素名称，男/女，DOB并排.. !! 当我将它们并排浮动时，给它们宽度，它似乎没有改变它。!! 我尝试在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

这可能是您要将表单拆分为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;
}

在HTML中排列元素并使用Javascript

2 个答案: