Survey Form, Element Display Issues

There’s a certain section of code within my Survey Form project that is not displaying properly. Need Help…Code section pasted below

<div>
      <p>Pick a fruit out of the following</p>
      <label for="watermelon">Watermelon</label>
      <input type="radio" id="watermelon" name="fruit-list" value="watermelon">
      <label for="apple">Apple</label>
      <input type="radio" id="apple" name="fruit-list" value="apple">
      <label for="banana">Banana</label>
      <input type="radio" id="banana" name="fruit-list" value="banana">
       </div>

My project code link pasted as well if you think it’s a general issue or if i made a mistake somewhere up the code chain:

your select tag doesn’t have a closing tag

1 Like

I need help. The corresponding CSS for the following code is giving me issues. I want the labels to display beside the input. i could go the HTML route of use the break tag but i want to learn how to do it via CSS instead. Please Help!!!

<div>
      <p>Pick a fruit out of the following</p>
      <input type="radio" id="watermelon" class="fruit-list" name="fruit-list" value="watermelon">
      <label for="watermelon">Watermelon</label>
      <input type="radio" id="apple" class="fruit-list" name="fruit-list" value="apple">
      <label for="apple" >Apple</label>
      <input type="radio" id="banana" class="fruit-list" name="fruit-list" value="banana">
      <label for="banana">Banana</label>
      </div>
    
    <div> 
    <p>What are your sources of meat?</p>
   <input type="checkbox" id="domesticated" class="meat-list" name="meat-source" value="domesticated">
      <label for="domesticated">Domesticated</label>
     <input type="checkbox" id="wild" class="meat-list" name="meat-source" value="wild">
      <label for="wild">Wild</label>
     <input type="checkbox" id="processed" class="meat-list" name="meat-source" value="processed">
      <label for="processed">Processed</label>
      </div>

Have you tried reviewing this lesson and this lesson?
Was there something you didn’t understand after doing so? If so, please tell is what it is.

Prior to you adding any styling the labels were next to the radio button inputs and checkbox inputs.

I don’t really understand what you mean, it’s already beside the label?

Do you want it in a column layout?

Yes, i want it in a column layout but the CSS display tag when used with the block attribute gives me a column layout both for the input radio buttons and their labels. I want the input labels to be in a row i.e beside the radio buttons to the right while the radio buttons themselves should be a column format. Hope this description of mine helps.

Do you mean like this?
image

Css issues

@tosinwithlove, the following is your CSS code

.fruit-list {
 display: block;
}

.meat-list {
  display: block;
}

Here block is not an attribute and display is not a CSS tag.
Block is a value assigned to the property display. In a CSS declaration they are known as a property: value; pair.

There are three other values you can assign other than block.
Try searching for something like css display property

I did but when i applied them to my code, i didn’t really get what i wanted so i had to resort to using the break tag in my HTML to get what i wanted. Anyways, guess i still have more researching and reading to do on the css display property.

Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

1 Like

All break tags removed. Have to do some more research on that. New problem. Trying to make my background image more transparent so that my body text would be more visible but everything i tried doesn’t seem to be working. Is it because it’s a hyperlinked image from a hosting site and not from my local drive?.

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