Survey-Form Project CSS Help

HTML-CSS
1

I cannot for the life of me get my text to align centered with any of my buttons and checkboxes. Also, I would love if my two radio buttons were centered within the box, but can’t figure out how to do it. Any help is appreciated! I’m running this on Chrome.

<fieldset>
      <p>Are you an individual OR a representative a company/organization?</p>
      <input type="radio" id="individual" name="affiliation" />
      <label for="affiliation" class="inline" >Individual</label>
      <input type="radio" id="company" name="affiliation" />
      <label for="affiliation" class="inline">Company/Organization</label>
</fieldset>
      <!--Align checkboxes with labels-->
<fieldset>
      <p>Please select AT LEAST one of my affiliations that you'd like the content to be posted to:</p>

      <input type="checkbox" id="personal account" name="personal account" value="personal" />
      <label for="personal account" class="inline" />Personal Account(s)</label>

      <input type="checkbox" id="100thieves" name="100thieves" value="100thieves" />
      <label for="100thieves" class="inline">100 Thieves</label>

      <input type="checkbox" id="women-in-code" name="women-in-code" value="women-in-code" />
      <label for="women-in-code" class="inline" >Women in Code, Inc.</label>

</fieldset>

input[type="radio"], input[type="checkbox"] {width: 10%;
border: 0px;
height: 0.5em;
width: 1em;}

label[for="affiliation"], label[for="personal account"], label[for="100thieves"], label[for="women-in-code"] {width: 70%;
display:inline}
1 Like
2

Welcome to the community @mxckxnzieee!

I notice the document does not have its Basic Boiler Template which is necessary.
The template includes the following basic information.

!DOCTYPE html to let the browser know it is rending a hypertext markup document.

html opening tag with its lang attribute and value. **The closing tag for
the html should be the last thing of code.

head opening and closing tags to hold the code that is not visible on the document but necessary for its proper display.

The code that should be included within the head are:

title opening and closing tags around a title

meta only one tag as it is self closing should include the attribute charset and value UTF-8

meta only one tag includes the attribute name with the value “viewport” and the attribute content with a value of “device=device-width, initial-value=1.0”

link only one tag as it is self closing which should include the attribute rel
with a value of stylesheet and a attribute href with a value of “styles.css”

body opening and closing tags to hold the code that is visible on the document (which is all of the code you have posted here) The opening tag should be above the first word of your current content. The closing tag, should be located after the last word and before the closing html tag.

after the final body closing tag

the closing html tag.

I hope this helps you!

Here is a link to Basic Boiler Template

3

yeah, It always gets me when I’m starting a HTML page and I forget to link the html to styles.css. Whenever I use CSS I’m like, “why is this not working!” but then I realize…

1 Like