Align Checkbox And Label June 09, 2024 Post a Comment I have a form which code looks like this: Solution 1: One option is to amend the style of the label element that follows the checkbox:input[type=checkbox] + label { display: inline-block; margin-left: 0.5em; margin-right: 2em; line-height: 1em; } CopyJS Fiddle demo.This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation: input[type=checkbox] { float: left; margin-right: 0.4em; } CopyJS Fiddle demo.Solution 2: It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line. Change it to display: inline-block or leave the display rule away and you're done.Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.Solution 3: Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.Baca JugaHow To Save Html5 Geolocation Data To Python Django Admin?Flex Container Vertical Overflowing Parent DivHow Can An Iframe That Has Content, Have An Undefined Contentdocument Object?<label for="checkbox"> <input id="checkbox"type="checkbox"> My Label </label> CopySolution 4: Forked your fiddle here with one small change. I nested the checkbox inside the label.<labelfor="agree"><inputtype="checkbox"name="agree">Accept the terms</label>CopyHope it helps.Solution 5: All you need to do is add display: inline to the label. Like this:label[for="agree"] { display: inline; } CopyYou may also have to add the following to get the Send button to stay on its own line: button[type="submit"] { display: block; } CopyThat is enough to make it work, but you could also nest the input inside the label, like this:<labelfor="agree"><inputtype="checkbox"name="agree" /> Accept the terms </label>CopyHowever, most people avoid doing this because it is semantically constricting. I would go with the first method. Share You may like these postsHow Modify A Property Of External Css File Using Jquery / JavascriptHow To Use Custom Search Box For Google Custom Search?Easiest Way To Vertically Align, Horizontally Aligned Images?Display Html Child Element When Parent Element Is Display:none Post a Comment for "Align Checkbox And Label"
Post a Comment for "Align Checkbox And Label"