CSS метка вертикальное выравнивание с полями ввода - PullRequest
Новая
       34

CSS метка вертикальное выравнивание с полями ввода

7 голосов
/ 19 декабря 2011

Я разрабатываю макет формы, который можно использовать на многих страницах онлайн-системы.Будучи преданным пользователем таблиц для этой цели в течение многих лет, я уже довольно привык к использованию ярлыков CSS + для этого.

Одна вещь, которую мне еще предстоит освоить, - это способ, которым разные панели браузеров& поместите метку относительно поля ввода.Я приведу пример кода, а также увеличенное изображение того, как он отображается в каждом браузере (IE = IE9).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <style>
body {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size:13px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    margin:20px;
}
input {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    border:solid 1px #666;
    width:150px;
}
.fld {
}
.usr {
    border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
    <label class="usr" for="email">Email*</label>
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>

ОК - теперь я могу опубликовать фотографию - вот как это выглядит после изменений Ахмеда Масуда.Он был прав - у файла reset.css, который у меня был (из http://html5reset.org/), не было отступов для элемента ввода. Однако даже после применения изменений все еще есть различия в выравнивании основаниятекст в метке по сравнению с входным. Теперь Firefox имеет мертвый уровень, а для IE и Chrome текст метки выше на 1 пиксель.

enter image description here

Если удалить ссылкув reset.css все снова меняется: Chrome становится мертвым, IE ставит метку на 1 пиксель выше, чем входной текст, Firefox на 1 пиксель ниже, чем текстовый ввод. См. ниже:

enter image description here

Я должен отметить, что это очень простой макет, просто чтобы попытаться диагностировать проблему. Позже я сделаю так, чтобы она выглядела лучше. Но сначала мне нужно знать, как сделать так, чтобы весь мой текст выстраивался во всех браузерах.с одним решением CSS.

Ответы [ 2 ]

3 голосов
/ 19 декабря 2011

Хорошо, CSS-выравнивания - это немного чёрное искусство с CSS2, поэтому позвольте мне рассказать вам, что происходит:

1) ваш reset.css, вероятно, НЕ сбрасывает отступ элемента ввода, поэтому выизбавиться от этой ошибки на 1/2 пикселя

Попробуйте добавить их к своему стилю

Итак, одна вещь состоит в том, чтобы удалить этот отступ из ввода: 

 input { padding: 0 }

Теперь вы будетенеобходимо установить высоту элементов label и input: 

 .fld { height: 16px; }
 .usr { height: 16px; }

Другое дело, что вы, вероятно, хотите аккуратно выровнять поля одно под другим.Один из способов добиться этого - сделать метку блоком со свойством float left: 

 .usr { display: block; float: left; }

, а также .fld блоком: 

 .fld { display: block }

, вам нужно добавить несколькодругие параметры для p, чтобы сделать рендеринг более эстетичным.

Вот что я сделал с вашим файлом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Southrock HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <style>

body {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size:13px;
    margin:20px;
}

input {
    border:solid 1px #666;
    width:150px;
    padding: 0;
    height: 16px;
}

.fld { }

.usr {
    border:solid 1px red;
    height: 16px;
    display: block;
    float: left;
    margin-right: 5px;
    width: 7em;
}

p {
    clear: both;
    margin-bottom: 5px;
} 




</style>
</head>
<body>
<p>
    <label class="usr" for="email">Email*</label>
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
    <label class="usr" for="email">First Name*</label>
    <input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>

Это делается так же, как в IE / Safari / FF / Opera

0 голосов
/ 29 мая 2013

Это один из способов выравнивания: 

<span>
    <label>Email</label>
    <input type="text" name="email" />
</span>

CSS: 

form span {
    vertical-align: middle;
    display: block;
    width: 100%;
}
form label { 
    display: inline-block; 
    float: none;
    width: 150px;
    padding: 0;
    margin: 5px 0 0;
    text-align: left; 
}
form input {
    display: inline-block;
    float: none;
    width:auto;
    margin:5px 0 0 10px; 
    padding:5px 5px;
}
...