Неправильная передача текста для переключателя

У меня есть 2 html переключателя (разделенные тегами <br />), где текст обертывает под радиокнопку вместо выравнивания с левым отступом (из-за размера, содержащего div). Текстовое обертывание не является проблемой, проблема в том, что он обертывается неправильно под самой кнопкой радио, а не выравнивается с текстом в строке над ним. Я предполагаю, что кто-то создал тег ввода где-то в каскаде. Я не делал исчерпывающий поиск всех стилей, прикрепленных к этой странице, но не должен ли текст просто автоматически обертываться правильно, например, список пули?

И если нет, как мне это исправить? Нужно ли вставлять тег <br />, где я хочу, чтобы строки были разбиты, чтобы они были правильно выровнены?

Спасибо!

Ответ 1

Прежде всего, использование <br /> обычно не рекомендуется, гораздо лучше попробовать и использовать свойство CSS margin для создания пространства между элементами.

В этой ситуации также лучше использовать CSS для выполнения того, что вы хотите сделать. Это связано с тем, что по умолчанию эти элементы не будут иметь такого поведения.

В этом случае вам нужно что-то похожее на это:

<div style="width:300px">
    <input type="radio" class="radioLeft" />
    <div class="textBlock">
        Some text that is too long to fit inline and must be broken 
        up over multiple   lines.Some text that is too long to fit inline 
        and must be broken up over multiple lines.Some text that is too 
        long to fit inline and must be broken up over multiple lines.
    </div>
    <div style="clear:both;"></div> //this is important for repeated inputs
</div>

И тогда ваш CSS будет выглядеть так:

.radioLeft
{
   float: left;
}

.textBlock
{
    float: left;
    width: 80%; //Adjust this value to fit
}

Ответ 2

Вы можете просто использовать CSS для принудительного переноса текста. Я предполагаю, что у вас есть тег <span> вокруг текста, поэтому вы можете использовать следующее, чтобы отрегулировать его положение:

span {
  display: block;
  margin-top: -16px;
  margin-left: 28px;
}

Надеюсь, что это поможет! Томер

Ответ 3

Ответ на 2015 год:
Поскольку ни одна другая душа не работала для меня, вот как я это делаю:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
    div { display:table-row; }
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
    div label { display:table-cell; }   
</style>
</head>
<body>
<form>
<div>
    <span><input type="radio" id="a"></span>
    <label for="a">First button label<br>First button label</label>
</div>
<div>
    <span><input type="radio" id="b"></span>
    <label for="b">Second button label</label>
</div>
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>

См. http://jsfiddle.net/8jzss08p/
Работает в: Firefox 41, Chrome 45, Internet Explorer 11

Ответ 4

Извините за ответ так поздно, я просто столкнулся с этим сообщением, здесь другое решение:

p { margin-left: 20px; text-indent: -20px; }