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

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

Кстати, этот текст типа ввода имеет margin-bottom 10px, который исходит из стиля бутстрапа.

Вот код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <style> 
     input[type="text"] { 
      vertical-align: baseline; 
     } 
    </style> 
</head> 
<body> 
    <form action=""> 
     <span>Name</span> 
     <input id="name" type="text">  
    </form> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

, когда я установил:

 input[type="text"] { 
      vertical-align: baseline; 
     }

Я получаю нормальное позиционирование:

enter image description here

Но когда я установил:

 input[type="text"] { 
      vertical-align: top; 
     }

я ожидал увидеть, что входной элемент будет установлен, но InstEd этикетки элемент изменил свое местоположение

enter image description here

И когда я установил:

 input[type="text"] { 
      vertical-align: bottom; 
     }

Я вижу снова позиционирование применяется к элемент этикетки:

Я всегда думал, что smth вот так:

Элемент body определяет высоту строки строки, в которой сидят как метки, так и элементы ввода. После этого и метки, и элементы ввода будут располагаться в соответствии с свойством вертикального выравнивания относительно поля строки, определенного элементом тела.

Но здесь я вижу, что некоторая привязка свойства вертикального выравнивания входного элемента влияет на элемент метки. Может кто-нибудь объяснить, почему это происходит?

источник

2014-02-09 Rustam Issabekov

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

С настройкой по умолчанию vertical-align:baseline базовая линия ввода выравнивается по базовой линии к диапазону. Я составил схему элементов красного цвета, а координату y - там, где они совпадают. Тогда это выглядит так, как показано в окне линии, когда вы оставляете вертикальное выравнивание по умолчанию.

vertical-align:baseline

Теперь ли вы совместите эти два элемента в верхней

vertical-align:top

или нижней

vertical-align:bottom

генплану остается тем же самым. Поскольку ни в пролете, ни на входе нет полей сверху, нет причин создавать какое-либо пространство между этим полем строки и предыдущими элементами (или верхней частью окна).
Помните, что для начала прокрутки нет фиксированного положения на экране. Его вертикальное пятно в строке окна может варьироваться; так же, как если бы у вас были промежутки с большим размером шрифта в другом месте в строке строки.

Надеюсь, что очистит все!

Таким образом, решение исходной проблемы - это просто применить верхний край к вводу. (Или, наоборот, к диапазону, но тогда вы также должны изменить его отображение на встроенный блок, поскольку по умолчанию поля не заполняют поля.)

источник

2014-02-09 15:02:28

Действительно хороший ответ мужчина :) Оцените! –

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

ответ

Смежные вопросы