将按钮与选择框对齐（HTML 表单）答案

【问题标题】：Aligning a Button with a Select Box (HTML Forms)将按钮与选择框对齐（HTML 表单）
【发布时间】：2012-03-29 19:39:49
【问题描述】：

我正在尝试在页面上创建一个搜索面板，该面板由三个选择框（下拉菜单）和一个按钮组成。但是我无法让他们排队。这一定已经做了几千次了，这让我很伤心。

为了简化它并了解发生了什么，我创建了以下简约页面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
</head>

<body>
    <table>
        <tr>
            <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1">
                <td bgcolor="#FF0000">
                    <select class="searchbox" name="type" style="width:140px">
                        <option value="">choose a style.....</option>
                        <option value="beach">Beach</option>
                        <option value="city">City</option>
                    </select>
                </td>
                <td bgcolor="#FF0000">
                    <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C">
                </td>
            </form>
        </tr>
    </table>
</body>
</html>

Firefox 中的结果如下所示，

Chrome 中的这个，

IE9 中的这个，

这在 IE9 兼容性视图中。

抱歉，由于我是新手，我不允许发布图片，但请接受我，它们都是不同的。老版本的IE我都不敢看！

如何使选择框与所有浏览器中的按钮垂直居中对齐？我一定遗漏了一些明显的东西：这不是火箭手术！

【问题讨论】：

火箭手术？这是新的......

标签： html css alignment

【解决方案1】：

你需要玩line-height和vertical-align... 而且那里并没有真正需要一张桌子，至少在您发布的简化示例中不需要：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<form action="" method="post" name="search1" id="search1">
<div style="background-color:red;padding:0;height:30px;line-height:30px;">
    <select class="searchbox" name="type" style="width:140px">
       <option value="">choose a style.....</option>
       <option value="beach">Beach</option>
       <option value="city">City</option>
    </select>
    <input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;">
</div>

</form>

</body>
</html>

【讨论】：

这很有趣。我会走开试试看。我想我确实需要真实版本的表格，这比我在这里玩的简化版本要复杂一些。