Prevenire avvolgimento di testo sotto i pulsanti di opzione

Question

Il modo migliore che potrebbe descrivere quello che voglio è con questa immagine:

Come faccio a fare in modo che il testo sia allineato con il testo in alto, e non il pulsante di opzione?

Rilevante CSS è la seguente:

.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 ; 
} 
;} 

Markup:

<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> 

Quando provo a stare a galla il pulsante di scelta, tutto il testo diventa fuori di colpo.

Answer 1

E 'piuttosto semplice, basta girare il vostro elemento label-display: block; e utilizzare margin-left per il vostro tasto label e float radio lasciato il

Demo

Demo 2(Niente di speciale, radio multipla appena usato per la dimostrazione)

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

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

Basta notare che dire se si archiviano la radio con le etichette in un elemento li, qualcosa come

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

Quindi assicuratevi di sé li cancella usando qualcosa come

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

Ciò garantirà la cancellazione automatica di tutti gli elementi li e, per quanto riguarda lo psuedo , è ben supportato in IE8, quindi nulla di cui preoccuparsi.

Answer 2

.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; 
} 

Supponendo che il markup è:

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

Answer 3

Amo questo:

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; 
} 

Answer 4

Flexbox soluzione:

Ora che FlexBox è ampiamente supportato, un semplice display: flex; funzionerà come Magia.

Basta avvolgere sia lo input sia il testo con uno <label> (in modo che facendo clic sul testo si attiva anche l'input senza la necessità di un for="") e voilà!

.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>

Se si desidera mantenere la separata <label>, basta avvolgere sia in un elemento per l'applicazione la correzione flex: https://jsfiddle.net/pn4qyam5/