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

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

13 голосов
/ 07 октября 2011

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

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

Спасибо!

Ответы [ 4 ]

20 голосов
/ 07 октября 2011

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

Это также лучше в этомСитуация использовать 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
}
5 голосов
/ 08 октября 2011

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

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

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

4 голосов
/ 14 октября 2015

Ответ за 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's label<br>First button's label</label>
</div>
<div>
    <span><input type="radio" id="b"></span>
    <label for="b">Second button's 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

0 голосов
/ 08 мая 2013

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

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