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

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

html css

将按钮与选择框对齐（HTML表单）,html,css,alignment,Html,Css,Alignment,我试图在页面上创建一个搜索面板，由三个选择框（下拉菜单）和一个按钮组成。然而，我无法让他们排队。这件事以前肯定做过几千次，但它给了我太多的悲伤为了简化它并理解正在发生的事情，我创建了以下极简页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled

我试图在页面上创建一个搜索面板，由三个选择框（下拉菜单）和一个按钮组成。然而，我无法让他们排队。这件事以前肯定做过几千次，但它给了我太多的悲伤

为了简化它并理解正在发生的事情，我创建了以下极简页面

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


无标题文件
您需要使用行高
和垂直对齐。。。
那里没有真正需要的表格，至少在你发布的简化示例中没有：
<!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>


无标题文件
选择一种风格。。。。。
海滩
城市
火箭手术？这是新的…这很有趣。我去试试看。我想我确实需要真实版本的表格，它比我在这里玩的简化版本要复杂一些。