简体   繁体   中英

How to align text and select box horizontally?

This code produces

<table>
    <tr>
        <td NOWRAP><?php echo "Employee Birthdays for " . $monthName; ?></td>
        <td width="100%"></td>
        <td>Browse:</td>
        <td valign="middle">
            <form method="get">
                <select type="submit" name="mo" onchange="this.form.submit()">
                    <option value="01">January</option>
                    <option value="02">February</option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </form>
        </td>
    </tr>
</table>

This picture: 在此处输入图片说明

How can I get the month selector box to actually line up with "Browse:"?

Edit: I should note that this works in IE, but in Chrome it's misaligned.

You have some other CSS styles affecting the code, it seems to work fine below.

I checked this both in Firefox and Chrome, latest versions.

 td { border: 1px dotted gray; height: 100px; /* for demo only */ } form { border: 1px dashed blue; } 
 <table> <tr> <td nowrap>Employee Birthdays for October</td> <td width="100%"></td> <td>Browse:</td> <td valign="middle"> <form method="get"> <select type="submit" name="mo" onchange="this.form.submit()"> <option value="01">January</option> <option value="02">February</option> <option value="03">March</option> <option value="04">April</option> <option value="05">May</option> <option value="06">June</option> <option value="07">July</option> <option value="08">August</option> <option value="09">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </form> </td> </tr> </table> 

add any one code in your css

form{
  margin-bottom: 0em;
}

or

form{
  margin-bottom: 0em !important;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM