Как выровнять формы ввода в HTML

Я новичок в HTML и пытаюсь научиться использовать формы.

Самая большая проблема, с которой я столкнулся, - это выравнивание форм. Вот пример моего текущего файла HTML:

First Name:
Last Name:
Email:
 

Проблема с этим заключается в том, что поле поля после «Электронная почта» существенно отличается с точки зрения расстояния по сравнению с именем и фамилией. Каков «правильный» способ сделать так, чтобы они «выстраивались» по существу?

Я пытаюсь практиковать хорошую форму и синтаксис. , , многие люди могут делать это с помощью CSS. Я не уверен, я до сих пор изучал только основы HTML.

вопрос задан 30.11.2010
yoshyosh
9160 репутация

16 ответов


  • 95 рейтинг

    Принятый ответ (установка явной ширины в пикселях) затрудняет внесение изменений и разрывается, когда пользователи используют другой размер шрифта. Использование таблиц CSS, с другой стороны, прекрасно работает:

    form  { display: table;      }
    p     { display: table-row;  }
    label { display: table-cell; }
    input { display: table-cell; }
    
    

    Вот JSFiddle: http: // jsfiddle. нетто / DaS39 / 1/

    И если вам нужно, чтобы метки были выровнены по правому краю, просто добавьте text-align: right к меткам: http: // jsfiddle. нетто / DaS39 /


    РЕДАКТИРОВАТЬ: Еще одно быстрое примечание: таблицы CSS также позволяют играть со столбцами: например, если вы хотите, чтобы поля ввода занимали как можно больше места, вы можете добавить следующее в вашу форму

    
    
    
    

    Вы можете добавить white-space: nowrap к labels в этом случае.

    ответ дан Clément, с репутацией 5726, 19.05.2014
  • 51 рейтинг

    Другой пример, это использует CSS, я просто помещаю форму в div с классом контейнера. И указал, что входные элементы, содержащиеся внутри, должны быть на 100% ширины контейнера и не иметь никаких элементов с обеих сторон.

    .container {
      width: 500px;
      clear: both;
    }
    
    .container input {
      width: 100%;
      clear: both;
    }
    
    
    
    Example form
    
    



    ответ дан serialk, с репутацией 763, 30.11.2010
  • 22 рейтинг

    Простое решение для вас, если вы новичок в HTML, это просто использовать таблицу, чтобы выстроить все в ряд.

    First Name:
    Last Name:
    Email:
            
    ответ дан amonett, с репутацией 325, 30.11.2010
  • 16 рейтинг

    Я считаю, что гораздо проще изменить отображение надписей на встроенный блок и установить ширину

    label {
        display: inline-block;
        width:100px;
        text-align: right;
    }
    
    ответ дан Byron, с репутацией 195, 8.08.2013
  • 6 рейтинг

    Вы должны использовать таблицу. В соответствии с логической структурой данные являются табличными: вот почему вы хотите, чтобы они были выровнены, потому что вы хотите показать, что метки связаны не только с их полями ввода, но и друг с другом, в двумерной структуре ,

    [подумайте, что бы вы сделали, если бы вместо полей ввода отображались строковые или числовые значения. ]

    ответ дан Collin Street, с репутацией 77, 12.04.2013
  • 3 рейтинг

    Для этого я предпочитаю сохранять правильную семантику HTML и максимально упрощенно использовать CSS.

    Что-то вроде этого сделало бы работу:

    label{
      display: block;
      float: left;
      width : 120px;    
    }
    

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

    ответ дан Samuel EUSTACHI, с репутацией 2660, 21.11.2012
  • 2 рейтинг

    с использованием css

    .containerdiv label {
      float:left;
      width:25%;
      text-align:right;
      margin-right:5px; /* optional */
    }
    .containerdiv input {
      float:left;
      width:65%;
    }
    

    это даст вам что-то вроде:

               label1 |input box             |
        another label |another input box     |
    
    ответ дан Gjaa, с репутацией 497, 18.05.2013
  • 1 рейтинг

    Я знаю, что на этот вопрос уже дан ответ, но я нашел новый способ их правильного выравнивания - с дополнительным преимуществом - см. http: // www. Гарган. org / en / Web_Development / Form_Layout_with_CSS /

    в основном вы используете элемент метки вокруг ввода и выравниваете, используя это:

    
    
    
    

    , а затем с CSS вы просто выровнять:

    label {
        display:block;
        position:relative;
    }
    
    label span {
        font-weight:bold;
        position:absolute;
        left: 3px;
    }
    
    label input, label textarea, label select {
        margin-left: 120px;    
    }
    
    • вам не нужны беспорядочные ошибки для переноса строк - это означает, что вы можете быстро создать многостолбцовый макет динамически
    • вся строка кликабельна. Особенно для флажков это огромная помощь.
    • Динамически показывать / скрывать строки формы легко (вы просто ищете вход и скрываете его родительский элемент - & gt; метку)
    • Вы можете назначить классы для всей метки, чтобы она показала ввод ошибок намного яснее (не только вокруг поля ввода)
    ответ дан Niko, с репутацией 4155, 17.10.2013
  • 1 рейтинг

    Хорошо для самых основ вы можете попробовать выровнять их в таблице. Однако использование таблицы плохо для размещения, так как таблица предназначена для содержимого.

    То, что вы можете использовать, это CSS плавающие методы.

    Код CSS

    .styleform label{float:left;}
    .styleform input{margin-left:200px;} /* this gives space for the label on the left */
    .styleform .clear{clear:both;} /* prevent elements from stacking weirdly */
    

    HTML

    
    

    Подробную статью, которую я написал, можно найти, отвечая на вопрос о проблеме с плавающей точкой в ​​IE7: Проблемы с плавающей точкой в ​​IE7

    ответ дан mauris, с репутацией 32340, 30.11.2010
  • 0 рейтинг

    Вставьте входные теги в неупорядоченные списки. Сделайте тип стиля нет. Вот пример.

      Input1
    • Input2
    • работал для меня!

    ответ дан Vivek Iyer, с репутацией 54, 17.12.2016
  • 0 рейтинг

    css Я использовал для решения этой проблемы, похож на Gjaa, но стиль лучше

    p
    {
        text-align:center;
            }
    .styleform label
    {
        float:left;
        width: 40%;
        text-align:right;
        }
    .styleform input
    {
        float:left;
        width: 30%;
        }
    

    Вот мой HTML, используемый специально для простой формы регистрации без кода php

    Register

    Это очень просто, и я только начинаю, но это работало довольно хорошо

    ответ дан PA_Commons, с репутацией 59, 16.04.2014
  • 0 рейтинг

    Я большой поклонник использования списков определений.

    Username:
    Password:
    
    

    Их легко стилизовать с помощью CSS, и они избегают клейма использования таблиц для разметки.

    ответ дан Andrew, с репутацией 1151, 30.11.2010
  • 0 рейтинг

    Традиционный метод заключается в использовании таблицы.

    Пример:

    First Name:
    Last Name:

    Однако многие утверждают, что таблицы ограничивают и предпочитают CSS. Преимущество использования CSS заключается в том, что вы можете использовать различные элементы. Из списка div, упорядоченного и неупорядоченного списка вы можете выполнить тот же макет.

    В конце концов, вы захотите использовать то, что вам удобнее всего.

    Подсказка: с таблицами легко начать работу.

    ответ дан OV Web Solutions, с репутацией 755, 30.11.2010
  • -1 рейтинг
    
    

    В CSS вы должны объявить как label, так и input как display: inline-block и указать ширину в соответствии с вашими требованиями. Надеюсь, что это поможет вам. :)

    ответ дан kta, с репутацией 12077, 7.02.2014
  • -2 рейтинг

    Я думаю, было бы проще, если бы вы использовали таблицу для структурирования своей формы. Может быть утомительно, но ничего «скопировать и вставить» с небольшим редактированием не может исправить.

    
    

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

    ответ дан Hammerton Mwawuda, с репутацией 9, 5.11.2014
  • -3 рейтинг

    Просто добавьте

    ответ дан Zak Gill, с репутацией 1, 7.10.2017