Текст идет в отдельные строки при использовании процентного отступа

Question

У меня небольшая проблема в HTML-формах. Когда я даю следующий CSS,

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 5px 0 10px;
      margin: 3px 0 0 0;
      display:block;

}

Это вывод, который я получаю:

Однако, когда я редактирую css, добавляя отступ в виде процентов:

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 40% 0 80%;
      margin: 3px 0 0 0;
      display: block;
}

Это вывод, который я получаю:

Я хочу использовать проценты, однако я хочу посмотреть на первом изображении. Есть идеи ??

Спасибо

Answer 1

Слишком много отступов слева от элемента метки:

.row .section-1 label {/* Formatting all section-1 labels */
      padding: 0 40% 0 80%;
      margin: 3px 0 0 0;
      display: block;
}

Определение заполнения CSS в процентах выглядит следующим образом:

Определяет заполнение в% от содержащего элемента

Таким образом, он добавляет 80% ширины элементов метки в качестве отступа. В исходном примере с фиксированным заполнением вы устанавливаете отступ только в 10 пикселей слева.