Форум PHP программистов > Как поднимать <input> на уровне с текстом

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Как поднимать <input> на уровне с текстом

inpost

22.03.2011 - 05:10

Всем привет. Никак справиться не могу, вот проблема, смотрите:
http://my.jetscreenshot.com/demo/20110322-zyzy-3kb

Вот сам код:

      <form action="" method="post" style="display:inline">
          <input type="text" value="" name="login" style="margin-bottom:3px;" /> 
          <input type="password" value="" name="password" style="margin-bottom:3px;" /> 
          <input type="image" src="/skins/images/enter.png" value="Enter" name="ok" />
      </form>

Как видите, я попробовал применить margin-bottom для инпутов, и в ИЕ (замечу, как обычно!) всё работает, инпут поднимается и становится на одну линию с картинкой, собственно так же можно ровнять и с обычным текстом, а вот в Мозилле не хочет такой трюк работать. Как выровнять их по одной линии?
Чтобы наглядно было: высота блока - 14px, высота кнопки - 13px, высота инпутов - 10-11px, всё прижато к нижнему краю блока, поэтому и зеброй идёт. Подскажите, как можно исправить и сделать всё по центру на одной линии. Зарание спасибо!

P.S. чтобы ещё нагляднее было, сам блок выделил: http://my.jetscreenshot.com/demo/20110322-xccm-8kb

Спустя 5 часов, 7 минут, 33 секунды (22.03.2011 - 09:18) sergeiss написал(а):

А так тебе почему не нравится: "position:relative; top:-3px"? Или любую другую величину укажи, как тебе хочется. Это должно работать во всех браузерах.

PS. И кстати, в твоей картинке по ссылке нифига не понятно, что ты хотел показать

Спустя 37 минут, 40 секунд (22.03.2011 - 09:55) Snus написал(а):

inpost
Тут таблицы нужно использовать, брат :)

      <form action="" method="post" style="display:inline">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td><input type="text" value="" name="login" style="margin-bottom:3px;" /></td> 
          <td><input type="password" value="" name="password" style="margin-bottom:3px;" /></td> 
          <td><input type="image" src="/skins/images/enter.png" value="Enter" name="ok" /></td>
        </tr>
      </table>
      </form>

Спустя 3 минуты, 17 секунд (22.03.2011 - 09:59) Snus написал(а):

inpost
Либо так

<html>
<head>
<style>
#logIn div { float: left; }
form { margin: 0; }
</style>
</head>
<body>
<div id="logIn">
<form action="" method="post">
  <div><input type="text"></div>
  <div><input type="text"></div>
  <div><input type="submit" value="ok"></div>
</form>
</div>
</body>
</html>

Спустя 1 час, 10 минут (22.03.2011 - 11:09) Michael написал(а):

input {
 vertical-align: middle;
}

Спустя 14 минут, 45 секунд (22.03.2011 - 11:24) Snus написал(а):

Michael
В Огнелисе твой способ не катит.

Спустя 46 минут, 40 секунд (22.03.2011 - 12:10) Michael написал(а):

Цитата (Snus @ 22.03.2011 - 10:24)

Michael
В Огнелисе твой способ не катит.

значит что ты что то не верно делаешь. Это основы css. У меня в лисе работает прекрасно.

Да и в других ...

Спустя 7 дней, 14 часов, 58 минут, 22 секунды (30.03.2011 - 02:09) inpost написал(а):

Всем спасибо, каждый из вариантов по своему хорош. Я не зря написал на форум, много полезного узнал, не хотелось с самого начала через таблицу делать =) Наиболее простым и удобным оказался вариант Michael`a, его и использую. Проверил во всех браузерах, отлично работает.

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).

Быстрый ответ:

Здесь расположена полная версия этой страницы.