Survey Form - Build a Survey Form

HTML-CSS
1

I have finished the project, but though my checkboxes pass the tests I notice they often split over one line, say the checkbox and ‘North’ for ‘North Africa’ will be at the end of one line, and then ‘Africa’ will be on the next line.
Is there a way to keep the checkboxes and text together? I tried using br and div but that didn’t really solve it.

<input id="north" value="north" type="checkbox" name="theatre-cb" class="inline"><label for="north" class="inline">North Africa</label>
         <input id="namb" value="namb" type="checkbox" name="theatre-cb" class="inline"><label for="namb" class="inline">Nambutu</label>
           <input id="boli" value="boli" type="checkbox" name="theatre-cb" class="inline"><label for="boli" class="inline">Bolivia</label>
             <input id="scot" value="scot" type="checkbox" name="theatre-cb" class="inline"><label for="scot" class="inline">Scotland</label>
1 Like
2

The input and label elements are inline elements by default, which means that the browser will put a line break in between them if needed. That’s probably what is causing your issue. What you need to do is find a way to make each input and label work together as a single unit so that the browser doesn’t split them up.

Do you have any ideas on how to do this? Remember, there are HTML elements whose sole function is to help you group elements together so you can style them accordingly.

2 Likes
3

Thanks for your help :slight_smile: The only thing I can think of is the class element, and I’ve looked back and can’t find anything else.
I have already linked the labels and inputs together using a class element, in order to make them inline, but this doesn’t seem to be the way to keep them together. It seems like there is another element I need in the CSS to do that.

1 Like
4

I think you need another element in the HTML to do this :slightly_smiling_face:

Try wrapping each label and input pair in a block-level element. That will force a line break at the end of each pair.

1 Like
5

I tried wrapping each one in a div element, but then they all appear in a single column down the page.
I still wanted them to be inline, but stop there being a line break between any of the checkboxes and their labels.

1 Like
6

It’s hard for me to see what you are trying to do without seeing all of your code.

Sounds like you might want to change those divs to spans then and prevent line breaking on the spans with the white-space property. But I’m just guessing here since I can’t see all of your code.

2 Likes
7

It worked! I wrapped the input and label in a span then added white-space: nowrap to the CSS. Now North Africa and its checkbox all appear together on the next line. Thanks so much :slight_smile:

HTML

<span>
         <input id="north" value="north" type="checkbox" name="theatre-cb" class="inline"><label for="north" class="inline">North Africa</label>
         </span>

CSS

span {white-space: nowrap}
2 Likes
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.