Выравнивание формы HTML - ввод с меткой - PullRequest
Новая
       11

Выравнивание формы HTML - ввод с меткой

1 голос
/ 26 февраля 2012

Я пытаюсь сделать это доступным для всех браузеров. Разные браузеры дают разные результаты (с IE наиболее проблематичным для меня). Я включил скриншоты, чтобы вы могли видеть, о чем я говорю.

Вот так выглядит форма в Safari, Firefox и Chrome:

enter image description here

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

Вот так выглядит форма в IE6 и IE7:

enter image description here

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

А это IE8 и IE9:

enter image description here

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML 

<form method="post" action="?test" id="form">
    <label for="user">USERNAME</label>
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
    <label for="password" class="clear">PASSWORD</label>
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>

CSS 

label {
    background: yellow;
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    float: left;
    margin-right: 50px;
    text-align: right;
    cursor: pointer;
}

input {
    height: 30px;
    background-color: #fafafa; 
    border: 1px solid #abaaaa;
    width: 300px;
    margin: 5px 0 5px 0;
    float: right;
}

Теперь мой вопрос: как я могу выровнять метки, чтобы они были выровнены по вертикали с полями ввода? Я использовал поиск здесь и большую часть времени что-то вроде 

vertical-align: middle;

рекомендуется, но это совсем не работает. Единственное исправление для Safari, Chrome и Firefox - это добавление к надписям поля margin или top padding, но это разрушает форму в IE8 и IE9.

Что я могу сделать с этой проблемой? Сбросить высоту в поле ввода не вариант для меня.

1 Ответ

4 голосов
/ 26 февраля 2012

поставить clear:both после тега ввода (где-то).

Я бы посоветовал вам добавить больше разметки к вашим формам для дополнительной настройки. Обычно я люблю делать такие формы: 

<div class="field">
    <label for="user">USERNAME</label>
    <div class="field-subject">
        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    </div>
</div>

.field { 
    overflow: auto; /* this "clears" the floated elements */
    margin-bottom: 10px;
}

.field label {
    float: left;
    width: 200px;
}

.field .field-subject {
    float: left;
    width: 500px;
}
...