Выравнивание кнопки с полем выбора (формы HTML) - PullRequest
Новая
       4

Выравнивание кнопки с полем выбора (формы HTML)

0 голосов
/ 29 марта 2012

Я пытаюсь создать панель поиска на странице, состоящую из трех полей выбора (раскрывающихся списков) и кнопки.однако я не могу заставить их выстроиться в очередь.Должно быть, это было сделано тысячи раз, прежде чем оно принесло мне столько горя.

Чтобы упростить его и понять, что происходит, я создал следующую минималистическую страницу. 

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

Как я могу заставить поле выбора вертикально выравниваться по центру с кнопкой во всех браузерах?Я, должно быть, упускаю что-то очевидное: это не ракета!

  1. http://i.stack.imgur.com/LI9vf.gif
  2. http://i.stack.imgur.com/HcCKN.gif
  3. http://i.stack.imgur.com/bHAkP.gif
  4. http://i.stack.imgur.com/PUXkl.gif

1 Ответ

0 голосов
/ 29 марта 2012

Вам нужно поиграть с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...