Use relative positioning for the input element and correct the top position of the input, based on the line-height of the element containing the input element.


<!DOCTYPE html>
< html>
< head>
    <meta charset="UTF-8">
    < title>Align radio button with label on one line</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <!–<link rel="stylesheet" href="plain.css">
    <script type="text/javascript" src="plain.js"></script>–>
        .radio-container {
            box-sizing: border-box;
            font-family: ‘Open Sans’, sans-serif;
            font-size: 13px;
            line-height: 30px;
            margin: 0;
             outline: 0;
            overflow: hidden;
            padding: 0;

        .radio-container input {
             box-sizing: border-box;
            margin: 0;
            outline: 0;
            padding: 0;
            position: relative;
            top: 9px;
            vertical-align: top;
< /head>
< body>
    <h1>Align radio button with label on one line</h1>
    <div class="radio-container">
         <input name="red" type="radio" value="red" checked="checked">
        <input name="green" type="radio" value="green">
        <input name="blue" type="radio" value="blue">
< /body>
< /html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.