CODEWITHSUNDEEP
htmlcss
Jeeves
Jeeves

Reputation: 127

How do you style a fieldset with the legend inline with the other children

Can anybody tell me how to style the following fieldset so the legend and the radiobuttons are all on the one line?

<fieldset>
   <legend>Are you from planet earth?</legend>
   <label><input type="radio" name="answer"/>Yes</label>
   <label><input type="radio" name="answer"/>No</label>
</fieldset>

Upvotes: 3

Views: 2582

Answers (3)

benjarwar
benjarwar

Reputation: 1804

The answers are a bit stale. float: left; will work, but can cause other layout issues and requires clearing the float on subsequent containers.

Nowadays, flexbox or CSS Grid Layout have excellent modern browser support.

Upvotes: 0

Uniforlyff
Uniforlyff

Reputation: 111

CSS:

legend {
    float: left;
}

Upvotes: 5

Nate
Nate

Reputation: 847

This will work. Just float them left. Probably a better way to do it, but it works.

<fieldset>
   <legend style='float:left'>Are you from planet earth?</legend>
   <label style='float:left'><input type="radio" name="answer"/>Yes</label>
   <label style='float:left'><input type="radio" name="answer"/>No</label>
</fieldset>

Upvotes: 0

Related Questions