Prevent wrapping of text below radio buttons

Question

The best way I could describe what I want is with this picture:

How do I make it so the text aligns wi

Answer 1

It's pretty simple, just turn your label element to display: block; and use margin-left for the label and float your radio button to the left

Demo

Demo 2 (Nothing fancy, just used multiple radio for the demonstration)

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

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

Just note that say if you are storing the radio with the labels in an li element, something like

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

So make sure you self clear them by using something like

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

That will ensure that you are self clearing all the li elements, and about the :after psuedo, it is well supported in IE8 so nothing to worry about.

Answer 2

Flexbox solution:

Now that flexbox is widely supported, a simple display: flex; will work like magic.

Just wrap both the input and text with a <label> (so that clicking the text also toggles the input without the need for a for=""), and 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>

If you want to keep the <label> separate, just wrap both in an element for applying the flex fix: https://jsfiddle.net/pn4qyam5/

Answer 3

This worked for me

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

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

Answer 4

I love this:

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 5

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

Assuming that your markup is:

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