Выровнять поля ввода HTML-кода,:

Question

Выровнять поля ввода HTML-кода,:

У меня есть HTML-форма типа:

 <html>

  Name:<input type="text"/></br>

  Email Address:<input type="text"/></br>

  Description of the input value:<input type="text"/></br>

 </html>

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

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

Я в порядке с использованием CSS, если это может помочь достичь этого.

742 7

html css html5 alignment user-interface

7 ответов:

Comments

Ничего не найдено.

DaneSoul · Accepted Answer · 2012-06-03 10:56:55

рабочая JS Скрипка

HTML:

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS:

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}

Housy · Accepted Answer · 2012-06-03 11:02:52

вы можете использовать метку (см. JsFiddle)

CSS

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

HTML

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br />
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
 </html>

или вы можете использовать эти метки в таблице (JsFiddle)

<html>
    <table>
        <tbody>
            <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
            <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
            <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
        </tbody>
    </table>
 </html>

Madara Uchiha · Accepted Answer · 2012-06-03 10:43:39

установите ширину на элементе формы (который должен существовать в вашем примере! ) и поплавок (и очистить) входные элементы. Кроме того, отбросьте элементы br.

maksbd19 · Accepted Answer · 2014-08-25 18:41:12

в моем случае я всегда помещаю эти материалы в тег p, например

<p> name : < input type=text /> </p>

и так далее, а затем применить css, как
p {
  text-align:left;
}

p input {
  float:right;
}
необходимо указать ширину тега p.потому что входные теги будут плавать полностью правильно.

этот css также повлияет на кнопку отправки. Вам нужно переопределить правило для этого тега.

IcyFlame · Accepted Answer · 2013-07-09 06:51:56

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

JSFiddle

HTML
<table>

    <tr><td>Name:</td><td><input type="text"/></td></tr>

    <tr><td>Age:</td><td><input type="text"/></td></tr>

</table>


CSS
td{
    text-align:right;
}

vonwa · Accepted Answer · 2014-10-23 11:51:33

http://jsfiddle.net/T6zhj/1/

использование таблицы отображения-ячейка / строка будет выполнять эту работу без необходимости ширины.

html:
 <html>
  <div>
      <div class="row"><label>Name:</label><input type="text"></div>
      <div class="row"><label>Email Address:</label><input type = "text"></div>
      <div class="row"><label>Description of the input value:</label><input type="text"></div>
  </div>
 </html>
Css:
label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}

Parul · Accepted Answer · 2015-06-26 18:25:30

Я только что дал ширину метки и тип ввода были выровнены автоматически.

input[type="text"] {
    width:100px;
	height:30px;
	border-radius:5px;
	background-color: lightblue;
	margin-left:2px;
  position:relative;
}

label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;

}

<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>