HTML/CSS 表单(表格)DOB 行显示在两行上

Question

在我的网站表单上 - 我的出生日期日期、月份和年份菜单显示在两行上，我希望它们都显示在同一行上。

当我测试代码时，它显示在一行上，所以我相信一定存在宽度问题。

您可以在右侧窗体 （incomeprotectionstore.co.uk） 上看到问题。

任何帮助将不胜感激。

css的出生日期可以在下面看到：

<tr>
          <td nowrap=""><label><div align="left">Date of birth</div></label></td>
        <td><select name="x_C1DOB_YYYY" id="dd_dob_year" class="input-dob">
<?
for($i=1995; $i >= 1900; $i--){ 
?> 
<OPTION value="<? echo $i; ?>" <?  formSelected( $x_C1DOB_YYYY, $i ); ?>><? echo $i; ?></OPTION>
<?
}
?>
          </select>
          <select name="x_C1DOB_MM" id="dd_dob_month" class="input-dob">
  <?
for($i=1; $i<=12; $i++){ 
 if($i < 10) $x = "0".$i; else $x = $i;
 $month = $month_name[$i-1]; 
?> 
<OPTION value="<? echo $x; ?>" <?  formSelected( $x_C1DOB_MM, $x ); ?>><? echo $month; ?></OPTION>
<?
}
?>
        </select>
          <select name="x_C1DOB_DD" id="dd_dob_day" class="input-dob">
<?
for($i=1; $i<=31; $i++){ 
 if($i < 10) $x = "0".$i; else $x = $i;
?> 
<OPTION value="<? echo $x; ?>" <?  formSelected( $x_C1DOB_DD, $x ); ?>><? echo $x; ?></OPTION>
<?
}
?>          </select>
        </td>
    </tr>   

谢谢

山 姆

Answer 1

您可以尝试将选择包装在防止换行的元素中，如下所示：

<div style="white-space:nowrap;">
  <select>
  <select>
  <select>
</div>

Answer 2

在

包含 DOB 下拉列表的<td>上设置width:200px;（就像在表单其余部分的 <input> s 上设置一样）

例如，在 HTML 中<td class = "dob-wrapper">，在 CSS 中.dob-wrapper { width:200px; }

最终答案：

将第一个<td>更改为<td style="width:99px;">然后将第二个<td>元素更改为<td style="width:200px;">

如果您希望右侧而不是左侧的框更改，请使用 160px 而不是 99px

Answer 3

这是

生日的工作代码。 试试这个

<div id="birthday">
                <p>Birthday</p>
                    <table id="birthday">
                        <tr>
                            <th>
                                <select name="month">
                                    <option value="">Month</option>
                                    <option value="01" <?php if(isset($_POST['month']) && $_POST['month'] == '01') { echo 'selected="selected"'; } ?>>Jan</option>
                                    <option value="02" <?php if(isset($_POST['month']) && $_POST['month'] == '02') { echo 'selected="selected"'; } ?>>Feb</option>
                                    <option value="03" <?php if(isset($_POST['month']) && $_POST['month'] == '03') { echo 'selected="selected"'; } ?>>Mar</option>
                                    <option value="04" <?php if(isset($_POST['month']) && $_POST['month'] == '04') { echo 'selected="selected"'; } ?>>Apr</option>
                                    <option value="05" <?php if(isset($_POST['month']) && $_POST['month'] == '05') { echo 'selected="selected"'; } ?>>May</option>
                                    <option value="06" <?php if(isset($_POST['month']) && $_POST['month'] == '06') { echo 'selected="selected"'; } ?>>Jun</option>
                                    <option value="07" <?php if(isset($_POST['month']) && $_POST['month'] == '07') { echo 'selected="selected"'; } ?>>Jul</option>
                                    <option value="08" <?php if(isset($_POST['month']) && $_POST['month'] == '08') { echo 'selected="selected"'; } ?>>Aug</option>
                                    <option value="09" <?php if(isset($_POST['month']) && $_POST['month'] == '09') { echo 'selected="selected"'; } ?>>Sep</option>
                                    <option value="10" <?php if(isset($_POST['month']) && $_POST['month'] == '10') { echo 'selected="selected"'; } ?>>Oct</option>
                                    <option value="11" <?php if(isset($_POST['month']) && $_POST['month'] == '11') { echo 'selected="selected"'; } ?>>Nov</option>
                                    <option value="12" <?php if(isset($_POST['month']) && $_POST['month'] == '12') { echo 'selected="selected"'; } ?>>Dec</option>
                                </select>
                            </th>
                            <th>
                                <select id="day" name="day">
                                    <option value="">Day</option>
                                    <?php
                                    for($i=1; $i<=31; $i++)
                                    {
                                        echo '<option value="' . $i . '"';
                                        if(isset($_POST['day']) && $_POST['day'] == $i) 
                                        {
                                            echo ' selected="selected"'; 
                                        } 
                                        echo '>' . $i .  '</option>';
                                    }
                                    ?>
                                </select>
                            </th>
                            <th>
                                <select id="year" name="year">
                                    <option value="">Year</option>
                                    <?php
                                    for($i=2014; $i>=1905; $i--)
                                    {
                                        echo '<option value="' . $i . '"';
                                        if(isset($_POST['year']) && $_POST['year'] == $i) 
                                        {
                                            echo ' selected="selected"'; 
                                        } 
                                        echo '>' . $i . '</option>';
                                    }
                                    ?>   
                                </select>
                            </th>
                        </tr>
                    </table>
            </div>