2

Имеется код:

<input type="checkbox" id="msword-check" class="check-button" />
<label for="msword-check" class="check-label">Word - Текстовый процессор</label>

<input type="checkbox" id="msexcel-check" class="check-button" />
<label for="msexcel-check" class="check-label">Excel - Редактор электронных таблиц</label>

Хочется перенос строк после метки, а писать br некрасиво. Что порекомендуете?

6
  • Закатайте строки в div'ы.
    – ling
    Commented 9 дек. 2011 в 8:56
  • Ну а более изящного варианта не существует? Я тогда не знаю чем div-ы лучше br
    – culebre
    Commented 9 дек. 2011 в 8:57
  • div-ы можно стилизовать (например: отступами), br - просто перенос строки.
    – KiTE
    Commented 9 дек. 2011 в 9:15
  • Я имею в данной ситуации))) я знаю в чем принципиальная разница div и br))
    – culebre
    Commented 9 дек. 2011 в 9:25
  • Более изящный вариант: закатайте строки в p. Будет семантично, плюс с возможностью стилизации.
    – ling
    Commented 9 дек. 2011 в 10:16

2 ответа 2

2

С <form> или без него разницы ни какой. Можно сделать (вариант 1):

<style>
    .check-label {
        display: block;
    }
</style>
<label for="msword-check" class="check-label">
    <input type="checkbox" id="msword-check" class="check-button" />
    Word - Текстовый процессор
</label>
<label for="msexcel-check" class="check-label">
    <input type="checkbox" id="msexcel-check" class="check-button" />
    Excel - Редактор электронных таблиц
</label>

Или, вариант 2 (достаточно мутный, так как float:left для inline элементов н всегда хорошо работает):

<style>
    .check-button {
        clear: left;
        float: left;
    }
</style>
<input type="checkbox" id="msword-check" class="check-button" />
<label for="msword-check" class="check-label">Word - Текстовый процессор</label>

<input type="checkbox" id="msexcel-check" class="check-button" />
<label for="msexcel-check" class="check-label">Excel - Редактор электронных таблиц</label>
<br clear="left" />
6
  • Тьфу бред я не то скопировал сейчас подправлю))
    – culebre
    Commented 9 дек. 2011 в 8:53
  • Сорри я немного напутал, оба варианта пробовал хрень получается. И даже с inline-block мутил, тоже не получается. Про разницу, кстати, читал на одном форуме - достоверно утверждать не буду. Может имеет смысл обернуть input лэйблом?
    – culebre
    Commented 9 дек. 2011 в 8:56
  • .check-label {display: block} 100: должно сработать если ширина позволяет
    – sysashi
    Commented 9 дек. 2011 в 9:11
  • должно, но нет, длина позволяет, а лэйбл после чека почему-то на новой строке оказывается.
    – culebre
    Commented 9 дек. 2011 в 9:21
  • @chernomyrdin У тебя реально все работает в первом варианте?
    – culebre
    Commented 9 дек. 2011 в 9:52
0

Можно закатать весь код в PRE: <pre> <Input > <Input > <Label> </pre>

1
  • Только каждую строку надо писать с новой строки
    – vv-d
    Commented 10 дек. 2011 в 6:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.