title: How to make radio buttons horizontal with padding
body: <p>I'm trying to figure out how to make my radio buttons align horizontally with padding or space between the buttons. I've tried searching the internet but you can't find everything on the internet so now I'm here. I'm open to using Javascript and JQuery.</p>
  
  <p>Here's my JSFiddle: <a href="http://jsfiddle.net/547fx/1/" rel="nofollow">http://jsfiddle.net/547fx/1/</a></p>
  
  <p>Here's the Javascript:</p>
  
  <pre><code>function tryToMakeLink() {
  //get all selected radios
  var q1 = document.querySelector('input[name="q1"]:checked');
  
  //make sure the user has selected all 3
  if (q1 == null) {
      document.getElementById("linkDiv").innerHTML = "&lt;input type=button 
  disabled=disabled value=Next&gt;";
  } else {
      //now we know we have 3 radios, so get their values
      q1 = q1.value;
  
      //now check the values to display a different link for the desired configuration
      if (q1 == "AT&amp;T") {
          document.getElementById("linkDiv").innerHTML = "&lt;input type=button value=Next 
  onclick=\"window.location.href='http://google.com/';\"&gt;att 8gb black&lt;/input&gt;";
      } else if (q1 == "Other") {
          document.getElementById("linkDiv").innerHTML = "&lt;input type=button value=Next 
  onclick=\"window.location.href='http://yahoo.com/';\"&gt;other 8b white&lt;/input&gt;";
      } else if (q1 == "Unlocked") {
          document.getElementById("linkDiv").innerHTML = "&lt;input type=button value=Next 
  onclick=\"window.location.href='http://wepriceit.webs.com/';\"&gt;red&lt;/input&gt;";
      }
  }
  }
  </code></pre>