Як рівномірно додати пробіл між міткою та полем введення, незалежно від довжини тексту?

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

Подобається це:

enter image description here

12
Ось кілька прикладів на JSFiddle: jsfiddle.net/qAhQf
додано Автор starbucks, джерело
Вибачте за неправильне слово, я мав на увазі навіть простір.
додано Автор starbucks, джерело
Перш за все, використовуйте label замість span . Він призначений для з'єднання з входами і зберігає деякі додаткові функції (клацання мітки фокусує вхід). У всякому разі. Що саме ви маєте на увазі під "як додати речі між тегом пробілу та входом"? Які речі? Ви маєте на увазі, що всі етикетки мають однакову ширину незалежно від вмісту?
додано Автор Petr Čihula, джерело

8 Відповіді

Використовуйте label замість span . Він призначений для з'єднання з входами і зберігає деякі додаткові функції (клацання мітки фокусує вхід).

Це може бути саме те, що вам потрібно:

HTML:


<input id="dummy1" name="dummy1" value="dummy1">


<input id="dummy2" name="dummy2" value="dummy2">


<input id="dummy3" name="dummy3" value="dummy3">

CSS:

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

input, label {
    float:left;
}

jmfiddle DEMO тут.

16
додано
Це також пов'язано з доступністю, таким чином, мітка пов'язана з цим входом, і ви можете натиснути на мітку, щоб сфокусувати вхідні дані.
додано Автор Nick R, джерело
Дякую. У вашому прикладі є мітка для значення, що дорівнює значенню в атрибуті name і value. Я трохи новий, тому я хотів би знати, яке значення має бути на етикетці? Значення в полі імені або в полі значення? Або це може бути що-небудь?
додано Автор starbucks, джерело
Дякую. У мене виникають проблеми з вирівнюванням випадаючого списку з міткою.
додано Автор starbucks, джерело
Будь-який атрибут/вміст тегів може бути будь-яким. Єдине, що має збігатися з атрибутом для мітки та атрибутом id входу, щоб виконати логіку форми. name і id кожного вхідного файлу не повинні бути однаковими, але це рекомендується, щоб уникнути подальшої плутанини під час перегляду форми. Сподіваюся, що це допоможе :)
додано Автор Petr Čihula, джерело
@starbucks якщо це все, будь ласка, не забудьте прийняти відповідь;)
додано Автор Petr Čihula, джерело
@starbucks Оновіть своє питання, щоб я міг оновити свою відповідь. Зараз, на ваше запитання, все вирішено.
додано Автор Petr Čihula, джерело

Це може бути досягнуто за допомогою нової версії CSS display: grid ( підтримка браузера )

HTML:

<div class='container'>
  
  <input id="dummy1" name="dummy1" value="dummy1">
  
  <input id="dummy2" name="dummy2" value="dummy2">
  
  <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

2
додано
Найкраще рішення.
додано Автор Bcktr, джерело

Це може бути досягнуто за допомогою нової версії CSS display: grid ( підтримка браузера )

HTML:

<div class='container'>
  
  <input id="dummy1" name="dummy1" value="dummy1">
  
  <input id="dummy2" name="dummy2" value="dummy2">
  
  <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

2
додано
Найкраще рішення.
додано Автор Bcktr, джерело

Можна використовувати таблицю

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

The result would be: ImageResult

2
додано

Можна використовувати таблицю

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

The result would be: ImageResult

2
додано

Ви також можете використовувати код нижче

      <html>
 <head>
</head>
<body>
<form action="yourclassName.jsp">
  First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit"> </form> </body> </html>
2
додано
Не використовуйте для мітки, семантично правильний спосіб - використовувати тег
додано Автор Nick R, джерело

Ви завжди можете скористатися тегом "попередньо" в етикетці, і просто введіть у ньому порожні пробіли. Таким чином, ви завжди зможете додати те ж або різну кількість пропусків

<form>
<input type="text">
<input type="text">
</form>

0
додано

Ви завжди можете скористатися тегом "попередньо" в етикетці, і просто введіть у ньому порожні пробіли. Таким чином, ви завжди зможете додати те ж або різну кількість пропусків

<form>
<input type="text">
<input type="text">
</form>

0
додано