Prevent zawijanie tekstu poniżej przycisków radiowych

Question

Najlepszym sposobem mogę opisać to, co ja chcę, to z tej kategorii:

Jak mogę sprawić, aby tekst wyrównany z górnym tekstu, a nie Przycisk radiowy?

Stosowna CSS jest następująco:

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

Kiedy staram się unosić opcję cały tekst staje się obecnie walnięcie.

Answer 1

Jest to dość proste, wystarczy włączyć elementu label do display: block; i używać margin-left dla label i float swojej przycisk po lewej

Demo

Demo 2(Nic nadzwyczajnego, po prostu stosować wielokrotne radiowy do demonstracji)

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

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

Wystarczy pamiętać, że powiedzieć, jeśli są przechowywane radio z etykietami w elemencie li, coś

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

Upewnij się, że samodzielnie je wyczyścisz, używając czegoś w rodzaju:

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

Zapewni to, że samemu wyczyścisz wszystkie elementy li, a także o kodzie :after psuedo, jest dobrze obsługiwany w IE8, więc nie ma się czym martwić.

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

Zakładając, że znaczniki są:

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

Answer 3

Kocham to:

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

schematu flexbox rozwiązanie:

Teraz schematu flexbox jest powszechnie obsługiwany, prosty display: flex; będzie działać jak magia.

Wystarczy owinąć zarówno input i tekst z <label> (tak, że kliknięcie tekstu również przełącza wejście bez konieczności korzystania z for=""), i 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>

Jeśli chcesz zachować <label> oddzielne, po prostu zawinąć zarówno w elemencie stosowania Flex Fix: https://jsfiddle.net/pn4qyam5/