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

Помогите, пожалуйста! <br/> Пользователь вводит число на странице, и код генерирует строки с новыми полями для ввода. Количество создаваемых строк соответствует введенному пользователем числу. <br/> <b>Требуется выровнять первые 9 строк так, чтобы они находились на одном уровне с 10-й и последующими строками, не используя CSS.</b> <br/> <i>Ниже приведены исходный код и результат работы программы:</i>
  • 8 октября 2024 г. 10:15
Ответы на вопрос 5
Для создания отступа к тексту с использованием JavaScript и HTML без CSS, вы можете использовать элемент `<span>` или просто пробелы/неразрывные пробелы для добавления отступа. Давайте рассмотрим пример кода, который будет генерировать текстовые поля в зависимости от вводимого пользователем числа, с учетом требования о выравнивании первых 9 строк.

Вот пример HTML и JavaScript, который выполняет ваши требования:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Добавление отступа к тексту</title>
</head>
<body>

    <h2>Введите количество строк для генерации:</h2>
    <input type="number" id="inputNumber" min="1">
    <button onclick="generateFields()">Сгенерировать</button>

    <div id="output"></div>

    <script>
        function generateFields() {
            const number = parseInt(document.getElementById('inputNumber').value);
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = ''; // Очистка предыдущего вывода

            for (let i = 1; i <= number; i++) {
                // Добавление отступа для первых 9 строк
                let indent = i <= 9 ? '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' : ''; // 7 неразрывных пробелов

                // Создание строки с полем ввода
                outputDiv.innerHTML += indent + 'Строка ' + i + ': <input type="text"><br>';
            }
        }
    </script>

</body>
</html>
```

### Объяснение кода:
1. **HTML-структура:**
   - Ввод числа осуществляется через элемент `<input>` с типом `number`.
   - Кнопка вызывает функцию `generateFields()` для генерации текстовых полей.
   
2. **JavaScript:**
   - В функции `generateFields()` считывается введенное пользователем число.
   - В зависимости от введенного числа создается цикл `for`, который генерирует строки с текстовыми полями.
   - Для первых 9 строк вычисляется отступ в виде 7 неразрывных пробелов (`&nbsp;`), который добавляется перед текстом. Начиная с 10-й строки отступ не добавляется.

С помощью этого подхода первые строки будут выровнены с учетом требования не использовать CSS. Вы можете менять количество неразрывных пробелов, чтобы регулировать размер отступа.
С помощью offsetWidth или getBoundingClientRect получить элемент с максимальной шириной и применить для всех
Просто сразу все в таблицу положить - она специально для этого и создана.
Тег < tt> -отображение текста моноширинным шрифтом, обрамить им нужный div, или вообще подменить его на тот тег 
Ну и выводить числа с ведущими пробелами:
function TableYchastki() {
        let n = ChisloYchastkov.value, h=1+Math.floor(Math.log10(n));
        div1.style.display = "block";
        for (let i = 1; i <= n; i++) {
          div1.innerHTML = div1.innerHTML + "Площадь повреждённой территории на " +
             (" ".repeat(h) + i).slice (-h).replace(/\s/g,"&nbsp;") + 
             " участке: <input type=text id='ploshad" + i + "'><br>";
        }
    }

Нравится ответ VoidVolker 

Кроме этого, вы это никак не сделаете без использования css, т.к. css отвечает за позиционирование элементов на странице. Как вы сможете их позиционировать (Кроме варианта использования таблиц) без инструмента для позиционирования?

Если же стоит задача использования CSS через JS, тогда ответ sergski так же подойдёт:
С помощью offsetWidth или getBoundingClientRect получить элемент с максимальной шириной и применить для всех


Не единственный возможный вариант, но работать должен
Похожие вопросы