Вертикальное выравнивание в форме

[Launder]

http://jsfiddle.net/Launder/1tahrusy/

        <div class="feedback">            <p> Вы можете воспользоваться данной формой, для того, чтоб отправить нам сообщение.                Мы будем рады почитать содержательный отзыв и надеемся на плодотворное сотрудничество!            </p>            <form action="#" method="post">                <p>                    <label for="Name">Имя:</label>                    <input type="name" name="autor" id="Name">                </p>                <p>                    <label for="Mail">Email:</label>                    <input type="email" name="autormail" id="Mail">                </p>                <p>                    <label for="type">Вид:</label>                    <select name="sort" form="mail" id="type">                        <option value="general">общие вопросы</option>                        <option value="tech">технические вопросы</option>                    </select>                    </p>                <p><b>Введите Ваше сообщение:</b></p>                <p>                    <textarea class="announcement" name="comment">            </textarea>                </p>                <p><input type="submit" value="Отправить"></p>            </form>        </div>

label   {     margin-right: 5px;     width: 50px;      text-align: right;      float: left;      line-height: 28px;    }#Name, #Mail, #type   {      width: 250px;      box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);      color: #6d6d37;       padding: 1px;      padding-left: 10px;   }

Как сделать выравнивание label? Иными словами, надписи перед тремя верхними формами, сдвинуть чуть-чуть вверх?

Edited July 29, 2015 by Launder

[Jack_V]

Так?

[Launder]

Ну, пожалуй, можно и так... Спасибо!

Я правильно понимаю, что Вы убрали float, убрали text-align, как уже не нужный, и просто сделали пару пробелов в html, для выравнивания?

А можно ли как-то сделать так, чтоб было как изначально, но только текст чуть повыше? То есть, формы будут выравнены по левому краю, а текст, соответственно по правому?

И ещё, почему width: 250px; для всех трёх форм, последняя уже? Как можно сделать одинаковой ширины?

[Jack_V]

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

Ну и поясню :
   a) select был равен заданной ширине, к ширине же input-ов добавлялись padding-и (что и должно происходить по всем правилам свойства width), свойство\правило box-sizing пересчитывает ширину немного иначе.
   б) ну а модуль flexbox - это уже отдельная песня, очень простая в использовании, но не такая простая на поддержку.

Edited July 25, 2015 by Jack_V

[Launder]

Обалденно! Спасибо большое! Сейчас поразбираюсь.

[Launder]

Что-то я курю про flexbox и не вижу чтоб она была такая уж простая. Идея-то простая и интуитивно-логичная но вот свойств у неё чуть менее, чем до фига, и, честно говоря, не вижу, где бы это достаточно подробно и наглядно изложили. Если есть ссылочки где это объясняется исчерпывающе, и с хорошей визуальной иллюстрацией, буду рад... Заранее спасибо.

[Launder]

http://html5.by/blog/flexbox/

вот это мне понравилось.

Edited July 26, 2015 by Launder

[Launder]

ну а модуль flexbox - это уже отдельная песня

 

Шикарный вариант Вы привели! Просто и красиво.

[Launder]

Если честно, всё равно, не совсем понятно, как сделать, чтоб сам текст был выровнен по правому краю. Ставлю justify-content: flex-end, но в этом случае, текст прижимается к форме. Можно, конечно, проблелами это исправить, но это, в целом, как-то криво. Можно как-то это с помощью только CSS реализовать?

Да, здорово, что в flex-блоках matgin: auto работает для вертикального выравнивания.

[Jack_V]

По правому краю чего именно?

[Launder]

По правому краю самого себя: чтоб все формы в линейку, а текст как бы к ним прижимался, с небольшим отступом.

Вот, пожалуй, как-то так: http://jsfiddle.net/Launder/ttxpzujv/

label   {     margin-right: 5px;     width: 50px;      line-height: 23px;    }label, input   {      display: inline-block;      text-align: right;        }#Name, #Mail, #type   {      box-sizing: border-box;      width: 250px;      box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);      color: #6d6d37;       padding: 1px;      padding-left: 10px;   }

Edited July 28, 2015 by Launder

[Jack_V]

Ну вот, отлично же. Вопрос закрыт?)

[Launder]

Спасибо Вам огромное!

Ну пару вопросиков всё-таки есть.

1. Почему после преобразования в inline-block пришлось уменьшить межстрочное расстояние?

2. Можно ли было сделать аналогичную вёрстку с помощью указанного модуля flexbox?

P.S. Что с сайтом webref.ru не в курсе?

Edited July 28, 2015 by Launder

[Jack_V]

Да не за что)
1. Инлайн-блоковый элемент - это, очень грубо говоря, как буква с некоторыми характеристиками блока, а так же ближние инлайн-блоки имеют дополнительное пространство между собой. Это ни что иное - как пробел/табуляция в верстке, бороться можно по всякому. Например:

<ul>        <li></li>           <!-- Пусть все li - inline-block, тогда между всеми элементами li появится пробел -->        <li></li><!-- --><li></li>           <!-- Пустой комментарий убирает пустое место между 2-ым и 3-им li, но что если li очень много? -->        <li></li><li></li>  <!-- Нет табуляции - нет пустого места, но такой вариант убивает напрочь читаемость кода. -->        <li>                <!-- В !Doctype html (он же HTML5) допускается вовсе не закрывать тег li, -->     <li>                <!-- и где начинается один li - кончается другой. Но HTML4.01 такому варианту рад не будет. --></ul>                   <!-- А еще можно тегу ul задать font-size равным нулю, -->                         <!-- а для каждого отдельного li (или для всех сразу) необходимый размер шрифта -->

Edited July 28, 2015 by Jack_V

[Jack_V]

Более подробно о inline-block поищите тут. Очень хорошие статьи по ссылке.

2) Можно и через flexbox. Просто не нужно было задавать label обязательный width. Вот.
Но вообще вариант с text-align куда правильней решение.

Что с webref - сам не знаю, поищите на форуме тему о нем.

Edited July 28, 2015 by Jack_V

[Launder]

 

а так же ближние инлайн-блоки имеют дополнительное пространство между собой. Это ни что иное - как пробел/табуляция в верстке, бороться можно по всякому.

 

Я как раз по этому поводу тему открывал:

 

http://htmlforum.ru/index.php?showtopic=53005

Edited July 29, 2015 by Launder

[Launder]

Именно межстрочное расстояние почему-то увеличивается. То есть между блоками <P>. И оно увеличивается после того, как преобразовал label в inline-block. Ощущение что есть некий отступ по умолчанию (для блоков P он и должен быть), а когда внутри форма label, то он его как бы уменьшает. Что особенно странно, поскольку подпись справо перед формой - текст. В общем непонятно за счёт чего идёт это увеличение межстрочного расстояния.

Edited July 29, 2015 by Launder

[Launder]

В общем, по сути, нужно было к Вашему первому примеру добавить правый отступ (margin) для надписи перед формой и немного выровнять размер контейнера и можно использовать свойство flex-end.

Edited July 29, 2015 by Launder

[Launder]

Оказывается межстрочное расстояние увеличилось после того, как я убрал свойство float - почему?

[Jack_V]

Дайте ссылку на код в котором убирается float и увеличивается расстояние. Сейчас разберемся)

[Launder]

Jack_V, так это в самом первом моём посте код и приведён.

[Jack_V]

Это происходит из-за свойства line-height и из-за того, что float-элемент принимает значение dislpay-block.

[Launder]

Почему же строчный элемент при прочих равных занимает больше места? Это как-то связанно с базовой линией текста?

[Launder]

Интересно, что НИЧЕГО не меняя в исходном коде, приведённого в первом посте, кроме изменения межстрочного расстояния для label, можно добиться, как раз, выравнивания текста по форме.

 

http://jsfiddle.net/ugvt8zu5/1/  (добавлено ещё свойство border-box)

 

Для этого нужно просто уменьшеть line-height. Если же мы увеличиваем межстрочное расстояние, то расстояние между формами не увеличивается, а достигая какой-то критичной точки, просто съезжает. Если же уменьшать межстрочное расстояние, то текст движется вверх и вверх, а при значении нуль, форма просто наезжает на текст.

В первом приближении, думаю что дело в том, что расстояние между формами определяется отступами блока p (поэтому оно и не зависит от межстрочного расстояния label, которое свойством float выведено из общего потока).

А высота текста относительно форм, связана с тем, что хоть float-элемент и принимает значение dislpay-block, всё же текст отображается от базовой линии, которая тем выше, чем межстрочное расстояние меньше. Соответственно, она, видимо, отсчитывается от некоей воображаемой базовой линии предыдущей строки, которая должна быть либо чуть выше границы блока, либо совпадать с ней. Соответственно величина line-height, это расстояние между ней и местом где проходит базовая линия текущего текста (так я понял).

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

Получается плавающий элемент живёт как бы двойной жизнью: с одной стороны он с лёгкостью выходит за границы блока, в котором лежит, а с другой, межстрочное расстояние между самими плавающими элементами определяется не свойствами  line-height, а расстояниями между теми блоками, в котрых находятся плавающие элементы. Интересное поведение...

 

UPD: когда размер line-height, лежащего в плавающем элементе, больше размера "его" родительского блока он просто сдвигает нижний плавающий элемента вправо, как он и должен делать. А почему он спокойно уходить вниз, при большом размере своего line-height, при этом родитель его практически не замечает - потому что плавающий элемент вырван из потока, и для блоков практически прозрачен, но влияет на строчное содержимое блоков. Но флоаты "видят" друг друга, поэтому и происходит их сдвиг. А дальше они уже двигают строчное содержимое "своих" блоков.

 

http://habrahabr.ru/post/136622/

 

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

Edited January 2, 2016 by Launder