Пробел между меткой и входом

Question

У меня есть несколько ввода/textarea с некоторыми ярлыками. Я хочу сделать пространство между ярлыком и вводить его сам. Проблема заключается в том, что текст метки отличается всегда

Например:

<p class="formfield"> 
    <label translate="case.calculation.label.price"></label> 
    <input ng-model="part.priceByUser" class="table-form"> 
</p> 
<p class="formfield"> 
    <label for="textarea" translate="case.calculation.parts.description"></label> 
    <textarea id="textarea" rows="3" ng-model="part.descriptionByUser" class="table-form"></textarea> 
</p> 

Похоже:

Я думаю, что это может быть сделано с фиксированной шириной этикетки, так что я добавил что-то вроде :

.formfield label { 
    padding-right:10px; 
    width: 15%; 
} 

С чем он выглядит corr ЭСТ на все нормальный экране, например:

Но есть проблемы на небольшом устройстве, как мобильные телефоны, где текстовая метка может переполнение ниже входной зона, например:

Я буду рад любому посоветуйте или лучше практика для такого рода вопросов :) Спасибо, ребята.

Answer 1

Таким образом, мы говорили об использовании медиа-запросов в комментариях (и вы просили рекомендации) вашего ответа. Я не говорю, что это всегда лучшая практика, но будет работать в вашей ситуации и оставляет много места для ярлыка и ввода, который обычно является хорошей практикой в ​​мобильном телефоне. Простой способ, возможно, сделать некоторые изменения в ваших этикетках будет использовать CSS, как это:

@media (max-width: 480px) { 

    .formfield label { 
    padding-right:0px; 
    width: 100%; 
    } 

    .formfield input, .formfield textarea { 
    width: 100%; 
    } 

} 

Пожалуйста, обратите внимание все ваши другие CSS может отличаться от моего, но в вашем примере это, вероятно, отлично работает. Просто установите 480px на то, что когда-либо соответствует вашим потребностям. Это точка останова, когда затрагивает медиа-запрос.

Просто для справки: MDN - Using media queries

Answer 2

Вы правы, вы должны установить фиксированную ширину меток (15% НЕ фиксированная ширина). Я также хотел бы использовать макет таблицы для лучшего внешнего вида:

.formfield { 
 
    display: table; 
 
    width: 100%; 
 
    padding-bottom: 25px; 
 
} 
 
.formfield label, 
 
.formfield .input-wrapper { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.formfield label { 
 
    width: 100px; 
 
} 
 
.formfield .input-wrapper .table-form { 
 
    width: 100%; 
 
}

<div class="formfield"> 
 
    <label for="price">Price</label> 
 
    <div class="input-wrapper"> 
 
    <input id="price" class="table-form" /> 
 
    </div> 
 
</div> 
 
<div class="formfield"> 
 
    <label for="textarea">Description</label> 
 
    <div class="input-wrapper"> 
 
    <textarea id="textarea" rows="3" class="table-form"></textarea> 
 
    </div> 
 
</div>

Answer 3

Если вы уже знаете, максимальное пространство, принимая наклейку затем применить значение, что пространство как min-width для всех этикеток. Что-то вроде этого:

.formfield label { 
    padding-right:10px; 
    width: 15%;  /* to maintain responsive */ 
    min-width: 120px; /* minimum threshold width */ 
} 

Это гарантирует, что минимальная ширина этикетки не менее 120px даже когда 15% ширины меньше 120px. Следовательно, макет будет по-прежнему реагировать.