How to Display Radio Buttons and Labels on the Same Line?

Same-Line Display of Radio Buttons and Labels

When creating a form, it can be desirable to have radio buttons and their corresponding labels displayed on the same line. However, by default, radio buttons display below their labels.

The following issue was encountered when attempting to align radio buttons and labels:

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

In this case, the radios are displayed beneath the labels. To address this, the following solution was implemented:

Float both labels and input elements to the left and adjust padding and margin until alignment is achieved.

Additionally, for optimal compatibility, add a class name to the radio buttons for older versions of Internet Explorer.

For a form with multiple radio buttons on the same line, the recommended markup is:

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

With the following CSS:

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

By implementing these techniques, it is possible to achieve same-line display of radio buttons and labels.

The above is the detailed content of How to Display Radio Buttons and Labels on the Same Line?. For more information, please follow other related articles on the PHP Chinese website!