Jump to content
  • Sign Up
  • 0

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


Launder

Question

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
Link to post
Share on other sites

23 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to post
Share on other sites
  • 0

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


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

Edited by Jack_V
Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

 

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

Link to post
Share on other sites
  • 0

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

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

Link to post
Share on other sites
  • 0

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

Вот, пожалуй, как-то так: 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
Link to post
Share on other sites
  • 0

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

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

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

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

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

Edited by Launder
Link to post
Share on other sites
  • 0

Да не за что)
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
Link to post
Share on other sites
  • 0

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

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

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

Edited by Jack_V
Link to post
Share on other sites
  • 0

 

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

 

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

 

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

Edited by Launder
Link to post
Share on other sites
  • 0

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

Edited by Launder
Link to post
Share on other sites
  • 0

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

Edited by Launder
Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • 3 Опрос

    You do not have permission to vote in this poll, or see the poll results. Please sign in or register to vote in this poll.
  • Обсуждения

    • Czar_dmitriy
      Почему при адаптиве налазят блоки друг на друга?
    • Romario1985
      Как правильно сделать оформить header используя только html и css  чтобы получилась как на этом макете Почему у меня правое меню постоянно плавает и как кнопку поиска правильно спозиционирорвать в самой форме чтобы она никуда не уезжала? Что не так в моем коде? https://jsfiddle.net/kjgydnfs/27/
    • Romario1985
      Спасибо!!!     А почему в этом задании перезаписав значение  для псевдоэлемента after на то что ниже по коду, он перекрыл другой псевдоэлемент before, соответственно убрав половину видимой области этого псевдоэлемента. Почему, например, не before выше чтобы перекрыть after?
    • Romario1985
    • klierik
      Здравствуйте. Не обязательно делать одну линию через 3 блока. Можно её реализовать как отдельный блок, конфигурируемый, с точкой. Позиционировать в рамках каждого блока-родителя
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy