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

Лучший способ описать, что я хочу, - это:

Как сделать так, чтобы текст выравнивался с верхним текстом, а не с радиокнопкой?

Соответствующий CSS выглядит следующим образом:

.basic-grey {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #FFF;
    word-wrap: break-word; 
    padding: 20px 30px 20px 30px;
    font: 12px "Myriad Pro", sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #DADADA;
}

}
.basic-grey h1>span {
    display: block;
    font-size: 11px;
}
.basic-grey label {
    display: block;
    margin: 0px 0px 5px;
}
.basic-grey label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey select {
    background: #FFF url('down-arrow.png') no-repeat right;
    background: #FFF url('down-arrow.png') no-repeat right);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 72%;
    height: 30px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey p {
    display: inline ;
}
;}

Разметка:

<form name="frm1" action="index4.php" method="POST" class="basic-grey">
    <h3>2.  I have taught the course, several times face to face, that I wish to transform into a blended format.  </h3>
    <input type="radio" name="q2" value="1" /> <p>This statement accurately reflects my experience.</p><br>
    <input type="radio" name="q2" value="2" /> <p>This statement partially reflects my experience (I have taught the course only a few times or once before).</p><br>
    <input type="radio" name="q2" value="3" /> <p>This statement does not reflect my experience (this a new course that I will teach for the first time in a blended format).</p><br>
    <br>
    <input type="submit" name="button" class="button" value="Submit" /> 
</form>

Когда я пытаюсь поплавать с помощью переключателя, весь текст выходит из строя.

Ответ 1

Это довольно просто, просто превратите свой элемент label в display: block; и используйте margin-left для label и float вашего переключателя слева

Демо

Демо 2 (Ничего необычного, просто использовалось несколько радио для демонстрации)

input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

Обратите внимание, что если вы храните радио с метками в элементе li, что-то вроде

<ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

Поэтому убедитесь, что вы сами очистите их, используя что-то вроде

.radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

Это гарантирует, что вы очищаете все элементы li и о :after psuedo, это хорошо поддерживается в IE8, поэтому не о чем беспокоиться.

Ответ 2

Flexbox решение:

Теперь, когда flexbox широко поддерживается, простой display: flex; будет работать как магия.

Просто оберните как input, так и текст с помощью <label> (чтобы щелчок текста также переключил вход без необходимости for="") и voila!

.flex-label {
  display: flex;
}
input[type=radio] {
  /* one way to help with spacing */
  margin-right: 12px;
}

<label class="flex-label">
  <input type="radio">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
</label>

Ответ 3

.basic-grey {
    word-wrap: break-word;
    font: 12px "Myriad Pro",sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
}
.basic-grey p {
    padding-left:20px;
}
.basic-grey input[type=radio] {
    margin-left:-15px;
}

Предполагая, что ваша разметка:

<p><input type="radio"/>This statements actually...</p>

Ответ 4

Мне это нравится:

HTML:

<input type="radio" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS

input[type="radio"] { 
    position: absolute;
}
input[type="radio"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}