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

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

Вот так:

enter image description here

Ответы

Ответ 1

2019 ответ:

Прошло некоторое время, и теперь я изменил свой подход при построении форм. Я сделал тысячи из них до сегодняшнего дня и очень устал набирать id для каждой пары label/input, так что это было сброшено в унитаз. Когда вы вводите input прямо в label, все работает одинаково, идентификаторы не нужны. Я также воспользовался flexbox что flexbox был очень гибким.

HTML:

<label>
  Short label <input type="text" name="dummy1" />
</label>

<label>
  Somehow longer label <input type="text" name="dummy2" />
</label>

<label>
  Very long label for testing purposes <input type="text" name="dummy3" />
</label>

CSS:

label {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
  width: 400px;
  line-height: 26px;
  margin-bottom: 10px;
}

input {
  height: 20px;
  flex: 0 0 200px;
  margin-left: 10px;
}

Скрипка ДЕМО

Оригинальный ответ:

Используйте label вместо span. Он предназначен для сопряжения с входами и сохраняет некоторые дополнительные функции (щелчок метки фокусирует ввод).

Это может быть именно то, что вы хотите:

HTML:

<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">

<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">

<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">

CSS:

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle ДЕМО здесь.

Ответ 2

Это может быть достигнуто с помощью совершенно нового display: grid CSS display: grid (поддержка браузера)

HTML:

<div class='container'>
  <label for="dummy1">title for dummy1:</label>
  <input id="dummy1" name="dummy1" value="dummy1">
  <label for="dummy2">longer title for dummy2:</label>
  <input id="dummy2" name="dummy2" value="dummy2">
  <label for="dummy3">even longer title for dummy3:</label>
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

При использовании сетки CSS элементы по умолчанию располагаются столбец за столбцом, а затем строка за строкой. Правило grid-template-columns создает два столбца сетки, один из которых занимает 1/4 общего горизонтального пространства, а другой - 3/4 горизонтального пространства. Это создает желаемый эффект.

grid

JS-FIDDLE

Ответ 3

Вы также можете использовать ниже код

<html>
<head>
    <style>
        .labelClass{
            float: left;
            width: 113px;
        }
    </style>
</head>
<body>
  <form action="yourclassName.jsp">
    <span class="labelClass">First name: </span><input type="text" name="fname"><br>
    <span class="labelClass">Last name: </span><input type="text" name="lname"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Ответ 4

Вы можете использовать таблицу

<table class="formcontrols" >   
    <tr>
        <td>
            <label for="Test">FirstName:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            <label for="Test">Last name:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

Результат: ImageResult

Ответ 5

Вы всегда можете использовать тег 'pre' внутри метки и просто вводить пробелы в нем, поэтому вы всегда можете добавить то же или другое количество требуемых пробелов

<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of 
spaces</pre>
<input type="text"></label>
</form>

Надеюсь, вам понравится мой ответ. Это простой и эффективный хак.