Выравнивание текста

@romanmendel · Регистрация: 26.10.2015

Студворк — интернет-сервис помощи студентам

Добрый день!
Помогите новичку, до html css далек, попросили сделать на работе тест для сотрудников, вроде ничего сложного, но возникла проблема с большими строками, когда часть текста переносится автоматически, и не совпадает с радио кнопками, подскажите как это исправить.

Python
1
2
3
4
5
{% for answer in question.answer_set.all %}
    <p><input type="radio" name="answer" id="answer{{ forloop.counter }}" value="{{ answer.id }}">
    <label for="answer{{ forloop.counter }}">{{ answer.answer }}</label>
    </p>
{% endfor %}

@Corel25 · 26.10.2015, 17:05

Python
1
2
3
4
5
{% for answer in question.answer_set.all %}
    <p><input style="display:inline-block; width: 10%;" type="radio" name="answer" id="answer{{ forloop.counter }}" value="{{ answer.id }}">
    <label style="display:inline-block; width: 89%;" for="answer{{ forloop.counter }}">{{ answer.answer }}</label>
    </p>
{% endfor %}

@romanmendel · 26.10.2015, 17:20 **[ТС]**

Теперь все строки ниже радио, а как сделать напротив?

@Corel25 · 26.10.2015, 17:26

romanmendel, я немного не понимаю... тут просто помимо html разметки присутствует не известный мне яп... Что если напишу тебе без него? чисто html+css? распихаешь потом это куда тебе нужно?

Добавлено через 1 минуту
и желательно скинь весь код формы...

@ns16 · 26.10.2015, 18:14

Можно сделать например так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<form action="" method="post">
    <p>
        <input id="answer1" type="radio" name="answer"><label for="answer1">длииииииииииииииииииииииииииииииииииииииииииииииииииинный текст1</label>
    </p>
    <p>
        <input id="answer2" type="radio" name="answer"><label for="answer2">длииииииииииииииииииииииииииииииииииииииииииииииииииинный текст2</label>
    </p>
    <p>
        <input id="answer3" type="radio" name="answer"><label for="answer3">длииииииииииииииииииииииииииииииииииииииииииииииииииинный текст3</label>
    </p>
</form>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
form {
    width: 400px;
    border: 1px solid black;
    margin: 5px;
}
    p {
        position: relative;
    }
        p > input[type='radio'] {
            position: absolute;
            left: 6px;
            top: 6px;
            display: inline-block;
        }
        p > label {
            display: inline-block;
            width: 100%;
            padding: 0 5px;
            text-indent: 20px;
            word-wrap: break-word;
        }

Песочница

@romanmendel · 27.10.2015, 09:46 **[ТС]**

Сделал как сказали

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.form {
    width: 400px;
    border: 1px solid black;
    margin: 5px;
}
    p {
        position: relative;
    }
        p > input[type='radio'] {
            position: absolute;
            left: 6px;
            top: 6px;
            display: inline-block;
        }
        p > label {
            display: inline-block;
            width: 100%;
            padding: 0 5px;
            text-indent: 20px;
            word-wrap: break-word;
        }

Получилось вроде нормально, только осталось вторую строку сравнять с первой, не подскажете как?

@ns16 · 27.10.2015, 10:02

CSS
1
2
3
4
5
6
7
p > label {
    display: inline-block;
    width: 100%;
    padding: 0 5px 0 25px;
    /*text-indent: 20px;*/
    word-wrap: break-word;
}

Так?

@romanmendel · 27.10.2015, 10:06 **[ТС]**

Да все просто супер, большое спасибо за помощь!!!

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

Выравнивание текста

Решение

Решение

@romanmendel 0 / 0 / 0 Регистрация: 26.10.2015 Сообщений: 4
	26.10.2015, 17:20 [ТС]
	Теперь все строки ниже радио, а как сделать напротив? 0

@Corel25 12 / 12 / 2 Регистрация: 13.04.2015 Сообщений: 94
	26.10.2015, 17:26
	romanmendel, я немного не понимаю... тут просто помимо html разметки присутствует не известный мне яп... Что если напишу тебе без него? чисто html+css? распихаешь потом это куда тебе нужно? Добавлено через 1 минуту и желательно скинь весь код формы... 0

@romanmendel 0 / 0 / 0 Регистрация: 26.10.2015 Сообщений: 4
	27.10.2015, 10:06 [ТС]
	Да все просто супер, большое спасибо за помощь!!! 0