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

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

Как это:

 starbucks24 июн. 2013 г., 14:41
Вот'Пример JSFiddle:jsfiddle.net/qAhQf
 starbucks24 июн. 2013 г., 14:48
Извините за неправильное слово, я имел в виду даже пробел.
 Petr Čihula24 июн. 2013 г., 14:43
Прежде всего, используйтеlabel вместоspan, Это'Он предназначен для сопряжения со входами и сохраняет некоторые дополнительные функции (щелчок метки фокусирует ввод). Тем не мение. Что именно вы подразумеваете под "как добавить вещи между тегом span и входом »? Что за вещи? Вы хотите, чтобы все метки имели одинаковую ширину независимо от содержимого?

Ответы на вопрос(5)



    <style>
        .labelClass{
            float: left;
            width: 113px;
        }
    </style>


  <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>


 Nick R24 июн. 2013 г., 15:16
Дон»т использовать<span></span> для метки семантически правильным способом является использование тег с действительнымfor="" приписывать.

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 горизонтального пространства. Это создает желаемый эффект.

JS-FIDDLE

 Bcktr28 мая 2018 г., 04:39
Лучшее решение
Решение Вопроса

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 ДЕМО здесь.

 starbucks24 июн. 2013 г., 16:16
Спасибо, у меня есть проблемы с выравниванием выпадающего списка с меткой.
 Nick R24 июн. 2013 г., 15:15
Это'Также по причинам доступности, таким образом, ярлык связан с этим входом, и вы можете нажать на ярлык, чтобыfocus вход.
 Petr Čihula24 июн. 2013 г., 16:09
@starbucks, если это 'все, пожалуйста, нене забудьте принять ответ;)
 Petr Čihula25 июн. 2013 г., 08:05
@starbucks Обновите свой вопрос, чтобы я мог обновить свой ответ. Прямо сейчас по вашему вопросу все решено.
 starbucks24 июн. 2013 г., 15:03
Благодарю. В вашем примере у вас есть метка для значения, равного значению в атрибуте name и value. Я немного новичок, поэтому я хотел знать, какое значение должно быть в ярлыке? Значение в поле имени или поле значения? Или это может быть что-нибудь?
 Petr Čihula24 июн. 2013 г., 15:11
Любой атрибут / содержимое тега может быть любым. Единственное, что должно соответствовать, этоfor атрибут и входid атрибут, чтобы получить логику формы сделано.name а такжеid каждого входа недолжно быть то же самое, но этоРекомендуемая хорошая практика, чтобы избежать путаницы при рассмотрении вашей формы. Надеюсь, поможет :)
 Hamad khan11 мая 2019 г., 21:23
Спасибо за выдающиеся строки

<table class="formcontrols">   
    <tbody><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>
</tbody></table>

Результат будет:ImageResult

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

<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>

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

Ваш ответ на вопрос