Hi, I am trying to position each checkbox next to its label, and have all checkbox+label combinations displayed in a stack/block style. But the checkboxes are stacking on top of the labels instead.
I’m really struggling to get this done! It worked for my radio buttons but not for the checkboxes and I can’t figure out why. Thank you!
<fieldset>
<label id="recommend">Would you recommend Free Code Camp to a friend?</label><input id="recommend" name="recommend" type="radio" value="definitely" class="inline" checked> Definitely</label>
<label><input id="recommend" type="radio" name="recommend" value="maybe" class="inline"> Maybe</label>
<label><input id="recommend" type="radio" name="recommend" value="not sure" class="inline"> Not Sure</label>
</fieldset>
<fieldset>
<label for="checkbox">What would you like to see improved? (Check all that apply)</label><input id="checkbox" type="checkbox" name="checkbox" value="front-end" checked class="inline"/><label> Front End</label>
<input id="checkbox" type="checkbox" name="checkbox" value="back-end" class="inline"><label> Back End</label>
<input id="checkbox" type="checkbox" name="checkbox" value="open-source-community" class="inline"> <label>Open Source Community </label>
</fieldset>
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 2em;
background-color: #FDF5E6;
color: #424949;
border: 1px solid #E9967A;
}
input, textarea {
background-color: #FDF5E6;
border: 1px solid #E9967A;
color: #424949;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
You need to provide your actual code both the css and html. Theres nothing we can do with a screen shot
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (‘).
Hi, sorry I was updating my post as you commented! I’ve now uploaded some sections of code and css. Let me know if you need more. sorry I’m brand new to this! thanks
So I found my own solution…but I don’t fully understand it. I wrapped each input checkbox element in it’s own ‘div’ element and set the class to ‘inline’, so that it would line up with my ‘inline’ selector on CSS.
And used this code on CSS which proved to be a winner.
input[type="checkbox"] + label {
display: inline-block;
}
without the individual ‘div’ elements wrapping each checkbox input though, it didn’t work. Anybody can explain why? Posting the new code below as well:
<label id="checkbox">What would you like to see improved? (Check all that apply)</label>
<div class="inline"><input id="front-end" type="checkbox" name="checkbox" value="front-end" checked class="inline" /><label id="front-end"> Front End</label></div>
<div class="inline">
<input id="back-end" type="checkbox" name="checkbox" value="back-end" class="inline"><label id="back-end"> Back End</label></div>
<div class="inline">
<input id="open-source" type="checkbox" name="checkbox" value="open-source" class="inline"> <label id="open-source">Open Source Community </label></div>
</fieldset>
fieldset {
border: none;
padding: 1rem 0;
border-bottom: 2px solid #424949;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 2em;
background-color: #FDF5E6;
color: #424949;
border: 1px solid #E9967A;
}
input, textarea {
background-color: #FDF5E6;
border: 1px solid #E9967A;
color: #424949;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="checkbox"] + label {
display: inline-block;
}
Hope this helps anyone who is struggling with this…I was dying. I still don’t fully understand it, but just thankful it worked as I tried so many different codes online