Question

我正在尝试在页面上创建一个“搜索”面板，其中包含三个选择框（下拉列表）和一个按钮。但是我无法让他们排队。这肯定已经成千上万次了，但却让我如此悲伤。

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

<!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中看它！

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

Answer 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>

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

1 个答案: