Выравнивание форм CSS - PullRequest
       1

Выравнивание форм CSS

1 голос
/ 11 января 2012

Я пытаюсь создать форму входа, но текстовые поля и кнопка отправки не выровнены должным образом. В настоящее время моя страница показывает кнопку отправки на несколько пикселей ниже текстовых полей.

Это должно выглядеть так. [ТЕКСТОВОЕ ПОЛЕ] [ТЕКСТОВОЕ ПОЛЕ] [КНОПКА]

Может кто-нибудь помочь мне с этой проблемой, я новичок в CSS ...

HTML:

 <form name='loginform' id='loginform' action='logincheck.php' method='post' >
 <input type='text' name='user_login' id='user_login' class='login-header' value='Username'>
 <input type='password' name='user_pass' id='user_pass' class='login-header'  value='password'><label style='color:#ffffff;'>
 <input type='submit' name='login' id='login' value='Log In' tabindex='100' class='login-button' >
 </form>

CSS:

.login-header {
border : 1px solid Black;
background-color : #CCCCCC;
color : #0E1930;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
height: 2em; 
}
.login-button {
border : 1px solid Black;
background-color : #CCCCCC;
color : #0E1930;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
padding:4px 10px; 
}

Ответы [ 3 ]

0 голосов
/ 11 января 2012

Это оказалось сложнее, чем я думал.Мне удалось заставить IE и Firefox выглядеть одинаково после пары изменений и дополнений CSS.Сначала вы используете em и px для размеров ваших входов.Вместо этого я изменил стиль height: 2em; на padding: 4px 0;.Самым сложным было выяснить, почему у firefox было больше внутреннего отступа для ввода ввода, чем для ввода текста.Я решил это, добавив следующее:

input::-moz-focus-inner
{
    border: 0;
    padding: 0;
}

Теперь они выглядят одинаково.Я создал пример здесь: http://jsfiddle.net/GhFvB/

0 голосов
/ 11 января 2012

Я сделал jsfiddle с исправлениями для Chrome / Safari и IE9.Это было прекрасно для моего Firefox (v7.0.1)

http://jsfiddle.net/2gEK3/6/

Надеюсь, это поможет.:)

(PS. Изменение IE9 находится в области HTML с использованием условного выражения IE. Изменение Chrome / Safari (Webkit) находится в CSS, я его там определил.)

0 голосов
/ 11 января 2012

ты пробовал display:inline;?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...