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

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

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

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

вот JSFiddle:http://jsfiddle.net/DaS39/1/

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

---

EDIT: еще одно краткое Примечание: таблицы CSS также позволяют играть со столбцами: например, если вы хотите, чтобы поля ввода занимали как можно больше места, вы можете добавить следующее в свою форму

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

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

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

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

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

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

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

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

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

что-то вроде этого будет делать работу :

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

С помощью 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     |

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

то, что вы можете использовать, - это плавающие методы 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

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

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

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

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

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

а потом с css вы просто выравниваете:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

• вам не нужны никакие грязные БР валяются переносы - означает, что вы можете быстро выполнить многоколоночная компоновка динамически
• вся линия клик-состоянии. Особенно для флажков это огромная помощь.
• динамическое отображение / скрытие строк формы легко (вы просто ищете вход и скрываете его родитель - > метка)
• вы можете назначить классы для всей метки, чтобы она показывала ввод ошибок намного яснее (не только вокруг поля ввода)

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

пример:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

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

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

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

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

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

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

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

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

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

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

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

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

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

работал на меня !

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

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

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

<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>

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

просто добавить

<form align="center ></from>

просто поместите выравнивание в открывающий тег.