How to place the checkboxes 1 for each line with CSS?

Hey!

I’m a bit stuck with trying to stylize the Survey Form with CSS. I used
.inline { width: auto; } to push my checkboxes to the left and my text to the right (which is what I wanted). But It also pushed all the checkboxes on the same lines. Anyone knows how I can force it to only be 1 checkbox + test on 1 line?

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title> Art Survey Form </title>
   <meta charset:"utf-8">
   <link rel="stylesheet" href="styles.css">
 </head>

<!--
* Title is for search engine optimization
* Charset is for encoding 
* link links HTML with CSS
-->

 <body>
   <h1 id="title">Art Survey Form</h1>
   <p id="description">I appreciate you taking the time to fill this in!</p>
   <form id="survey-form">
     <fieldset>
   <label for="name" id="name-label"> Name:</label> 
   <input class="bar" id="name" type="text" required placeholder="Enter your name"> 
   
   <label for="email" id="email-label"> Email:</label>
   <input class="bar" id="email" type="email" required placeholder="Enter your Email">

   <label for="number" id="number-label"> Age:</label>
   <input class="bar" id="number" type="number" required min="0" max="130" placeholder="Age"> 


   <label for="select" id="select-label"> Which option best describes you?</label>
   <select class="bar" id="dropdown"> 
   <option value="">Select an option</option>
   <option value="Beginner">Beginner artist</option>
   <option value="Intermediate">Intermediate artist</option>
   <option value="Pro">Professional artist</option>
   <option value="not_an_artist">I am not an artist</option>
</fieldset>
   </select>
<!--Add a which art career path option later? --> 
 <fieldset>
   <label for="radio" id="radio-label">Would you want to be a full-time artist?</label>
   <input value="Yes" id="Yes" type="radio" name="artist" class="inline">Yes
   <input value="No" id="No" type="radio" name="artist" class="inline">No
   <input value="Maybe" id="Maybe" type="radio" name="artist" class="inline">Maybe
</fieldset>
<fieldset>
 
   <label class="check" for="checkbox" id="checkbox">Which art fundamentals are you most interested in?
   <input value="Color_theory" type="checkbox" name="checkbox" class="inline">Color theory
   <input value="Lighting" type="checkbox" name="checkbox" class="inline">Lighting
   <input value="Perspective" type="checkbox" name="checkbox" class="inline">Perspective
   <input value="Figure_drawing" type="checkbox" name="checkbox" class="inline">Figure drawing
   <input value="Structure" type="checkbox" name="checkbox" class="inline">Structure
   <input value="Anatomy" type="checkbox" name="checkbox" class="inline">Anatomy
   <input value="Composition" type="checkbox" name="checkbox" class="inline">Composition
   <input value="Brushwork" type="checkbox" name="checkbox" class="inline">Brushwork
   <input value="Values" type="checkbox" name="checkbox" class="inline">Values
   <input value="Shape_design" type="checkbox" name="checkbox" class="inline">Shape design
</fieldset>
<fieldset>
   <label for="textarea" id="textarea">
     <b>Would you like to add something?</b>
   <textarea name="textarea" rows="8" cols="40" placeholder="Enter your comment here..."></textarea>

   <input type="submit" value="Submit" id="submit" class="submit">


</fieldset>
     </form>
 </body>

 <!--
* Label: For accessibility, best practices dictate that you always have a for attribute on a label, no matter where the input is located. (according to forum question I asked)

*There are many different type="" for input (I can google html input type to see them). 

*backend will show name=value, example from forum:
I’d suggest that the code on the server side would be a lot more readable (and easier to understand and debug) if your radio/checkbox input values reflected the user’s choice. <input value="maybe" id="Maybe" type="radio" name="artist">Maybe
… then if the user selects “Maybe”, the submitted form will contain artist=maybe.
-->

</html>
/* file: styles.css */
body {
 background-color: #1b1b32;
 color: white;
 text-align: left;
 font-family: Arial;
 margin: 3em auto;
}

h1, p{
 
}

fieldset{
 border:0;
 padding: 1rem 0;
}

label {
 display: block;
 Margin: 8px;
}


input,
textarea,
select {
 margin: 5px 0 0 0;
	width: 100%;
 min-height: 2.5em;
 border-radius: 5px;
 border:0;
}

textarea{
 border-radius:0px;
 }

 input {
   margin: 0px 0 0 0;
   margin-top: 1px ;
 }

 .submit {
   margin-top: 30px;
 }
 
.inline {
 width: auto;
 margin: 0 0.5em 3 3;
 vertical-align: middle;
}

label {

margin: 0.5rem 0;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

1 Like

Hello Mixer!

Wrap everything you want to have in one line in a
<div></div>
The div’s default display is block and it puts everything in it
in one line (if there is enough space).
You don’t even need grid or flexbox for your solution.

Hope it helps!

2 Likes

Hi @Mixer

I am still working on mine as well. But you might want to check this pages:
Menu at left it has a section about Forms

mdn web docs reference

My advice: try to build the mobile layout first and then use @media and flexbox to desktop layout. It is easier and you will use less code and media queries.

Sorry I cannot help you more

Good luck and happy coding!

1 Like

Thanks! Took some changes in other settings but the div worked out!!