it-swarm.com.ru

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

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

Как это:

enter image description here

13
starbucks

Используйте 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 ДЕМО здесь.

17
Petr Čihula

Это может быть выполнено с использованием нового 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

4
0xcaff

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

<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

2
Jorciney

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

<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>
2
Divyesh Rupawala