Sign in to follow this  
Launder

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

Recommended Posts

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 by Launder

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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


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

Edited by Jack_V

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Вот, пожалуй, как-то так: 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 by Launder

Share this post


Link to post
Share on other sites

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

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

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

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

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

Edited by Launder

Share this post


Link to post
Share on other sites

Да не за что)
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 by Jack_V

Share this post


Link to post
Share on other sites

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

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

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

Edited by Jack_V

Share this post


Link to post
Share on other sites

 

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

 

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

 

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

Edited by Launder

Share this post


Link to post
Share on other sites

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

Edited by Launder

Share this post


Link to post
Share on other sites

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

Edited by Launder

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Интересно, что НИЧЕГО не меняя в исходном коде, приведённого в первом посте, кроме изменения межстрочного расстояния для 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 by Launder

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By four17
      Можно ли с помощью css выровнять блоки одинакового по уровню ? 
      вот картинка.
       
      Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.
      Каким способом можно реализовать данное решение ? спасибо за внимание.
    • By iluha22
      Здравствуйте народ.
      Подскажите, как при заполнении формы обратной связи изменить язык всплывающих подсказок или язык ошибок обработчика формы?
      Форму создал на английском, а подсказки и ошибки всплывают по-русски.
      Спасибо.
    • By partisan42
      Доброго дня.
      Хочу реализовать такую вещь.
      Мне нужно сделать форму с некоторым количеством полей. Но количество полей должно быть вариативным.
      Как я это себе представляю, есть поле для ввода с выпадающим списком, в котором я выбираю например число 4. И у меня под ним появляется 4 поля для ввода, например textarea.
      Как это можно реализовать?
      Я не прошу всё расписывать за меня, но прошу хотя бы указать направление в котором можно копать.
      Заранее всем спасибо.
  • Member Statistics

    46,436
    Total Members
    3,128
    Most Online
    bauka2288
    Newest Member
    bauka2288
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.