Radio buttons and label to display in same line

by

If you use the HTML structure I lay out in this question you can simply float your label and input to the left and adjust padding/margin until things are lined up.

And yes, you’ll want to make your radio button have a class name for old IE. And to have all of them on the same line, according to the markup I linked to above, it would be like so:

fieldset {
      overflow: hidden
    }
    
    .some-class {
      float: left;
      clear: none;
    }
    
    label {
      float: left;
      clear: none;
      display: block;
      padding: 0px 1em 0px 8px;
    }
    
    input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
    }
<fieldset>
      <div class="some-class">
        <input type="radio" class="radio" name="x" value="y" id="y" />
        <label for="y">Thing 1</label>
        <input type="radio" class="radio" name="x" value="z" id="z" />
        <label for="z">Thing 2</label>
      </div>
    </fieldset>

More Related Contents:

  1. How to change the style of the title attribute inside an anchor tag?
  2. Word-wrap in an HTML table
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Vertically center two elements within a div [duplicate]
  5. How to keep origin in center of image in scale animation?
  6. set content height 100% jquery mobile
  7. How to center text vertically with a large font-awesome icon?
  8. Why is a div with “display: table-cell;” not affected by margin?
  9. HTML iframe – disable scroll
  10. Why isn’t object-fit working in flexbox?
  11. Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)
  12. Best way to include CSS? Why use @import?
  13. Overflow:hidden dots at the end
  14. Use Font Awesome icon as CSS content
  15. Bootstrap 4 row fill remaining height
  16. What is the use of style=”clear:both”?
  17. Is inside block correct?
  18. Denoting a preferred place for a line break
  19. How do I disable form fields using CSS?
  20. Best way to manage whitespace between inline list items
  21. Use multiple @font-face rules in CSS
  22. Remove space above and below tag HTML
  23. Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
  24. Select first occurring element after another element
  25. Changing the text selection color using CSS?
  26. How to change SVG color when it is an encoded CSS background image?
  27. Pixelated edge around a CSS Circle with overflow: hidden;
  28. Can you style ordered list numbers?
  29. Best Way to do Columns in HTML/CSS
  30. Table with table-layout: fixed; and how to make one column wider

Leave a Comment